This tutorial shows us how to expand and collapse sections in an accordion menu using dynamic panels and the OnClick, OnMove, OnHide, and OnShow events.

Dynamic Panel Tutorial

Accordion Control

Multi Level Menu

Go back to the "Accordion Control" page and select the dynamic panel for Section 2.  We always want Section 3 to move up and down with Section 2, so we'll "pin" these together by adding an OnMove case to "Move Section 3 with this".

That's it for the interactions! So, let's move the sections into place by nudging Section 2 so it's underneath Section 1, and Section 3 so it's underneath Section 2.

It's ready to go now! Generate a prototype and test it out. You'll see that clicking the section headers will expand/collapse the related content and move the sections below it up and down.

By default, the content for each section should be hidden.

Go back to the state for Section 1 and select the "Section 1 Content" panel. Right-click the panel and choose Edit Dynamic Panel > Set Hidden.

Do this for the remaining two section content dynamic panels.

Back to the Section 1 panel, select the header widget and add an OnClick case with the action, "Toggle Visibility for Section 1 Content".

Do the same thing with the headers in Section 2 and Section 3, adding an action to toggle the visibility of its respective section content..

If you followed these steps accordingly, you should have yourself a working accordion control that expands and collapses content. Oompah oompah...

Still need help? Check out the forum or drop us a line at support@axure.com.

© 2002-2012 Axure Software Solutions, Inc. All rights reserved.

The Round Up

When a section expands and collapses, the section(s) below it need to move up and down with it.

Open State1 of Section 1 and select the Section 1 Content panel.  Add an OnShow case to move Section 2 by (0, 120) (120px is the height of the content panel). Then, add an OnHide case to move Section 2 by (0, -120). 

On the show and hide of the content for Section 2, we want to move Section 3 up and down. So, we do the same thing on the OnShow and OnHide of the Section 2 Content panel.

Since Section 3 is the last section, we don't need to do this for the Section 3 Content panel.

First, open AccordionControl.rp and open the "Accordion Control" page.

Since each section will be moving up and down when we expand and collapse the content, we want these widgets to be in a dynamci panel. For each of the three sections, select the two widgets for the accordion header and section content.  Right-click and select Convert > Convert to Dynamic Panel.  This moves the two widgets for that section into its own dynamic panel. Repeat this for each of the accordion sections. 

Then, label the dynamic panels, "Section 1", "Section 2" and "Section 3".

We want to be able to show/hide the content for each section so these go into their own dynamic panels as well.

We'll start with Section 1. Double-click the Section 1 panel to open the state for editing. Select the widget for the section content (the rectangle with the lorem ipsum text), and convert it to a dynamic panel. Label this "Section 1 Content".

Repeat this for the section content in Section 2 and Section 3, labeling the widgets "Section 2 Content' and "Section 3 Content".

(AxureAccordionControl.zip)

This zip file contains the RP file needed to complete this tutorial

Step 1: Convert sections to dynamic panels

Step 2: Convert content to dynamic panels

Step 3: Set content panel to hidden

Step 4: Toggle visibility of section content

Step 5: Move Section 2 up and down

Step 6: Move Section 3 up and down

Step 7: Move Section 3 with Section 2

Step 8: Put the dynamic panels into place

Next: Photo Carousel Tutorial

Back to Dynamic Panels (Advanced)