© 2002-2017 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".


On the canvas are three sets of grouped widgets, each with one "Header" widget and four "Body" widgets. The "Body" widgets are the widgets that will start out 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.


Select all four "Body 1 Item" widgets, right-click the selection, and select "Convert to Dynamic Panel" in the context menu. Name this new dynamic panel "Body 1", and then hide it by checking the "Hidden" checkbox in the Style tab.


Repeat this process with the "Body 2 Item" and "Body 3 Item" widgets. Name the new dynamic panels "Body 2" and "Body 3".


Align the three "Accordion" 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, check the "Body 1" dynamic panel.


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 the "Body 2" dynamic panel and "Header 3" toggle the visibility of the "Body 3" dynamic panel. 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, check the "Body 2" dynamic panel.


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


Next, check the "Body 3" dynamic panel 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 dynamic panels.

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

Getting Started

Flow Diagrams

Static Wireframes

Interactive Prototyping

Collaboration

TUTORIALS

Interactive Button

Text Link

Show Hidden Widget

Navigation Menu

Tab Control

Lightbox

Flyout Menu / Custom

     Tooltip

Accordion Control

Account Login

Image Carousel

Auto-Tab Fields

Required Fields

Dynamically Set

     Droplist Options

Set Text with Droplist

Pass Text to Next Page

Full-Width Image or

     Banner

Scroll-Activated Sticky

     Header

Slider

Drag and Drop

Embed Media

Scrollable Table

Set Dynamic Panel State

     on Next Page

Table with Images

Terms and Conditions

MOBILE TUTORIALS

Swiping Slideshow

Scrolling Content

Sliding Menu

Toggle Switch

Animated

     Screen Transition

REPEATER

TUTORIALS

Basic Repeater -

     Dynamic Table

Sorting Rows

Filtering Rows

Adding, Deleting, and

     Updating Rows

Marking Rows

Advanced Repeater -

     Product Listing

Reference Pages

Advanced Filtering

Pagination

REFERENCE GUIDE