Axure Tutorial: Make an Accordion with Repeater


Accordion is a common component in interface design, but there is no accordion in the default widget library of Axure, so we need to make it ourselves.

Many designers can make simple accordions. They often use dynamic panels, hidden/show and other events to make them. At present, few designers can use repeaters to make accordion templates, which will need repeated work such as copying and pasting many times when modifying the content. If they want to add interaction, it will be more troublesome.

So today I’ll teach you how to make an accordion template with a repeater. When we need to modify it in the future, we just need to change the corresponding text in the repeater table.

Features to be Realized

1. Click the header to expand / collapse the corresponding content. At most one content can be expanded.

2. The first content is expanded by default.

How to Realize these Features

1. Create menus through repeaters. By setting the selection group, only one content is expanded at a time.

2. When the page is loaded, set the header with the item index of X in the repeater as selected, and then the header of X can be selected by default.

Preview the completed prototype for this tutorial

Widgets Setup

1. Drag a rectangle to the canvas and name it Header. Drag another rectangle to the canvas and name it Content. Drag an arrow icon to the canvas and name it Arrow. Group the arrow icon and Header.

2. Select all widgets and right-click to create a repeater.

Interactions Setup

1. Select the group of the header and arrow icon. Set expand / collapse content when clicked.

2. Select the Header. Set Show the Content push widgets below, and rotate the arrow to 180 ° when the Header is selected. When the Header is unselected, hide the Content pull widgets bellow / and rotate the arrow to 0 °.

3. Set when item of the repeater is loaded, if Item.Index equals 1, select Header. In this way, the Content of the first item can be shown by default.

4. Finally, set the interaction style when Header is selected.

In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.

#axure widgets #ux design #Axure templates #Axure tutorial #Axure

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.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store