© 2002-2016 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

 

ACCORDION CONTROL

In an accordion control, each header has a section of content that expands when clicked, showing more information. Some are designed so that opening one section of the accordion control automatically closes the other sections.

STEP 0: DOWNLOAD THE TRAINING FILE

If you don't already have it, download AxureTraining.rp and open it up in Axure RP. This file contains pages corresponding to each of the tutorials on the Axure training site. We recommend always completing the tutorials using our prepared file, but if you can't, that's okay too—we'll always tell you what to build in a new file in order to complete each tutorial without using AxureTraining.rp.

STEP 1: SETUP

In the training document, open the page named "Accordion control".


In the document are three sets of two grouped widgets, each with one header and one body widget. The "body" widget is the widget that will start hidden and be shown when the "header" widget is clicked.


Click the group "Accordion 1" to select it, and then click again to edit inside the group.


Hide the widget "Body 1" by selecting it and clicking the "Hidden" checkbox in the Style tab.


Repeat this process to hide "Body 2" and "Body 3".


Align the three groups so that "Header 2" is just below "Header 1" and "Header 3" is just below "Header 2".

STEP 2: ACCORDION INTERACTION

Do a slow double-click on "Accordion 1" to edit inside the group, and then select "Header 1". In the Properties tab, double-click "OnClick" to add a new OnClick case.


In the left column, click the "Toggle Visibility" action.


In the right column, click "Body 1".


At the bottom of this column, make sure "toggle" is selected. Then, click the checkbox "Push/Pull Widgets" and choose the Direction "Below".


Click "OK" to close the Case Editor.


Repeat these steps to make "Header 2" toggle the visibility of "Body 2" and "Header 3" toggle the visibility of "Body 3". You may want to then preview the page to make sure your buttons are expanding and collapsing their corresponding sections as expected.

STEP 3: COLLAPSE OTHER SECTIONS WHEN ONE SECTION IS OPENED

Select "Header 1". Double-click "Case 1" to open it for more editing.


In the left column, click "Hide".


In the right column, click "Body 2".


Click the checkbox "Pull Widgets". Make sure the Direction option is set to "Below".


Next, click "Body 3" in the right column.


Click the checkbox "Pull Widgets". Make sure the Direction option is set to "Below".


Click "OK" to close the Case Editor.


Repeat these steps in the interactions for "Header 2" and "Header 3", in each case hiding the other two body widgets.

STEP 4: PREVIEW

Click Preview.


Try opening and closing the different accordion segments. Notice how expanding an item collapses the others.

MORE RESOURCES

TRY IT!

HEALTH RESOURCES

PROVIDER DIRECTORY

EXERCISE RESOURCES

CORE TRAINING

TUTORIALS