Axure Tutorial: Accordion Interactions and Motion Effects
Introduction
In Axure Tutorial: Dropdown Menu Interaction and Motion Effects, we learned how to make a dropdown menu. Sometimes we want to show only one expanded menus, which needs accordion to achieve.
Features to be Realized
When clicking the menu header, show / hide the sub-menus. At most one expanded sub-menus is shown.
How to Realize these Features
Set the selection group for the header. When header clicked, switch the selected / unselected state of header.
When the header is selected, the menu items at the bottom is shown. When the header is unselected, the menu item at the bottom is hidden.
Preview the completed prototype for this tutorial
Widgets Setup
Make a header menu, and 3 items. Create three items as dynamic panels. set the selection group of the header.
Interactions Setup
When the header is clicked, switch selected/unselected state. When the header is selected, show the panel below and push the widgets below. When the header is unselected, hide the panel below and push the widgets below. Add animation to all interactions.
Finally, select and copy all the widgets. Stack them.
Select one of the panels, set to hide it when loaded and push the widgets below.
In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.
If you like the article, please share it with others with page link, thanks for your supporting! ❤
Note: Click here to download the completed RP file for this tutorial (RP 10 or up).
Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design.
What if there wer 3 menu items. How to close 2 when one is opening?
Leave a comment