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

Accordion 

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 

Widgets setup

Make a header menu, and 3 items. Create three items as dynamic panels. set the selection group of the header.

Interactions Setup

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. 

Loaded event of panel

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. 


Leave a comment

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.