Accordion · Axure Promotion · Axure RP · Axure Tutorial · Intermediate · Repeater · Selection Group · Jan 20, 2022

Axure Tutorial: Make an Accordion with Repeater

by WELLJOE

Introduction

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

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.