Forum Discussion
Can't Get my Accordion Tabs to work with states and the icon states to work.
Hi!
I built an accordion interaction on a single slide, and I can't find any videos to help me build it with states--a hover, selected, and visited (as the user can't move forward before selecting each accordion tab). I also have little plus and minus icons that need to work depending on whether the tab is expanded or not. Not sure if I am explaining this well.
Does anyone have any ideas about what steps I need fix and do next to get this to work properly?
Any help is much appreciated. The file is attached below.
In Gratitude,
Lea
2 Replies
Hello Lea Gracelyn .
Your activity is working pretty well. Your difficulties stem from using “preset” states that do what they want, not what you want.
So, I modified your file on screen 2, and I think everything is working now. Simplified. No variables. Less ‘preset’ states and a few more “as needed” states.
In my opinion, all you need are NORMAL & HOVER & VISITED states for the clickable elements on your base layer: the SELECTED state is unnecessary since you display a layer as soon as it is “selected.” And NORMAL (which look like your “selected” state) and ALREADY VIEWED states (my own name for it, for clarity) on your layers. That's it.
This way, a clickable element on the base layer automatically changes to “VISITED” as soon as it is clicked (it will remain so from now on). On a layer (any layer), the corresponding element changes to ALREADY VIEWED statue at the beginning of the layer timeline if the element is in VISITED state on the base layer. Look in the triggers panel on each layer.Next, to force your learner to view all your accordion tabs, there are two methods.
Either you disable the NEXT button at the beginning of the timeline, and reactivate it when all tabs are in VISITED state (this is what I have implemented).
Or you can create a trigger (which also exists but is currently suspended at the bottom of the panel) to move to the next screen when you click the NEXT button, if all tabs are in VISITED state, otherwise display the error layer.(Don't forget to delete the first trigger in the panel if you use this one).
I hope this helps. Let me know how it goes.🙂Thank you so much! Fixing the states helped so much.
