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

Make a accordion with repeater

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 

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.

create a repeater

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

Interactions Setup

Click event of header

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

Header Selection interaction

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 °.

Item loaded interaction
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.

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.

This section doesn’t currently include any content. Add content to this section using the sidebar.