Axure Docs
  • Axure RP Reference
  • Axure RP Tutorials
  • Axure Cloud Reference
  • Axure Support
  • Download

›The Basics

The Basics

  • Interactive Button
  • Hiding and Showing Widgets
  • Pass Text to Next Page
  • Anchor Link
  • Embedding Media
  • Full Width Image or Banner
  • Scrolling Region
  • Rotating Carousel / Slideshow
  • Navigation Menu
  • Tooltips
  • Tab Menu
  • Accordion Menu
  • Drag and Drop

Complex Interactions

  • Account Login
  • Auto Tab Fields
  • Blinking Text
  • Dynamically Set Droplist Options
  • Set Text with Droplist
  • Required Fields
  • Scroll Activated Sticky Header
  • Set Dynamic Panel State on Next Page
  • Slider Control
  • Terms and Conditions
  • Timer

Mobile Patterns

  • Swiping Slideshow
  • Toggle Switch

Accordion Menu Tutorial

In this tutorial, you'll learn how to make a structure in which clicking a heading expands a content area beneath it.


Note

Click here to download the completed RP file for this tutorial.

1. Widget Setup

Create the First Accordion Item's Heading

  1. Open a new RP file and double-click Page 1 in the Pages pane to open it on the canvas.

  2. Drag a Box 3 widget onto the canvas from the Libraries pane.

  3. Set the box's height to 50 with the H field in the Style pane or the style toolbar.

  4. Set the box's text to Heading 1.

Create the First Accordion Item's Content

  1. Drag a Box 2 widget onto the canvas and place it directly below the Heading 1 box.

  2. Right-click the box and select Fill with Lorem Ipsum in the context menu to fill the box with text.

  3. Right-click the box again and select Create Dynamic Panel.

  1. Hide the new dynamic panel by selecting it and clicking the Hidden icon in the Style pane or the style toolbar.

Group the Heading and Content Widgets

  1. Select the Heading 1 box and the dynamic panel and click Group at the top of the interface to place them in a widget group.

  2. Name the group Accordion Item 1.

2. Toggle the Content's Visibility When the Heading Is Clicked

  1. Select the Heading 1 box and click Click or Tap → Set Visibility in the Interactions pane.

  2. Select the dynamic panel in the Target dropdown, and then select Toggle just beneath it.

  3. Click More Options at the bottom of the action settings and select Push/Pull Widgets in the dropdown that appears.

  4. Leave the Below radio button selected and click OK to save the action.

3. Duplicate the Group to Create More Accordion Items

Create a Second Item

  1. Right-click the Accordion Item 1 widget group and select Copy. Then, right-click an empty spot on the canvas and select Paste.

  2. Rename the new widget group Accordion Item 2 and set the text on its heading box to Heading 2.

  3. Position the Accordion Item 2 group so that the Heading 2 box is just below the Heading 1 box.

Create a Third Item

  1. Repeat these steps to create a third widget group. Name the group Accordion Item 3 and set its heading box's text to Heading 3. Place it below the Heading 2 box.

4. Preview the Interaction

Preview the page and click the accordion headings to expand and collapse their corresponding content dynamic panels.

Additional Information and Tips

Collapse Open Items When a New Item Is Expanded

If you'd like only one accordion item to be expanded at a time, add another Show/Hide action to each heading box's Click or Tap event that hides every content dynamic panel other than its own. For example, the Heading 1 box would hide the dynamic panels in the Accordion Item 2 and Accordion Item 3 groups.

Note

Don't forget to select the Pull Widgets option when hiding the dynamic panels!

← Tab MenuDrag and Drop →
  • 1. Widget Setup
    • Create the First Accordion Item's Heading
    • Create the First Accordion Item's Content
    • Group the Heading and Content Widgets
  • 2. Toggle the Content's Visibility When the Heading Is Clicked
  • 3. Duplicate the Group to Create More Accordion Items
    • Create a Second Item
    • Create a Third Item
  • 4. Preview the Interaction
  • Additional Information and Tips
    • Collapse Open Items When a New Item Is Expanded
Axure Docs
Stay Connected

Sign up to receive Axure tutorials and news. You can unsubscribe at any time.

Axure
TourEnterpriseCompanyDownloadPurchase
Legal
Customer AgreementPrivacy PolicyGDPRSecurityPatents
Resources
BlogForumLicense PortalAxure Cloud
Support
Learn and SupportGetting StartedReferenceWidget LibrariesAxure RP 8 Documentation and Tutorials
Copyright © 2002–2021 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.