Forum Discussion
Accordion Interaction
Hello there,
I'm working on an accordion interaction and would like to restrict navigation.
Here is the situation: my player menu and controls are turned off and I added an arrow button to ack as the next button. However, I want to disable/hide this arrow button until the user visits all tabs.
Can someone show me how I can do that on the attached file?
Thank you!
Hi RubaAbudia there were a couple of issues. Firstly, the next button. Rather than grouping elements to make a button, it is best to drop icons into the button state(s). Therefore, when you want to show/hide the button, you show/hide a single element rather than the group of elements that make up the button. I dropped the arrow icon into the Normal state of the button.
The second issue was that the Next button was obscured by the contents of the layers. The Next button was on the base layer, and so when the other layers opened, they would cover the Next button. For this design, a duplicate version of the Next button was required for each layer.
Lastly we use the "Visited" state of the tabs to trigger the Next button Show function. Using the Tabs on the base layer, as each of the layers are open, we set the state of the appropriate Tab to visited.
This trigger is on each layer, e.g. Layer 1 triggers Tab 01, Layer 2 triggers Tab 02 etc.Then, for each instance of the button, we just need to add a trigger that Shows the Next button when all Tabs on the base layer are Visited, the Next button state should be changed to Normal.
Hello Sam,
That was helpful!
Thank you,
Hi RubaAbudia there were a couple of issues. Firstly, the next button. Rather than grouping elements to make a button, it is best to drop icons into the button state(s). Therefore, when you want to show/hide the button, you show/hide a single element rather than the group of elements that make up the button. I dropped the arrow icon into the Normal state of the button.
The second issue was that the Next button was obscured by the contents of the layers. The Next button was on the base layer, and so when the other layers opened, they would cover the Next button. For this design, a duplicate version of the Next button was required for each layer.
Lastly we use the "Visited" state of the tabs to trigger the Next button Show function. Using the Tabs on the base layer, as each of the layers are open, we set the state of the appropriate Tab to visited.
This trigger is on each layer, e.g. Layer 1 triggers Tab 01, Layer 2 triggers Tab 02 etc.Then, for each instance of the button, we just need to add a trigger that Shows the Next button when all Tabs on the base layer are Visited, the Next button state should be changed to Normal.
