Designing expandable and collapsable content

With Justinmind, you can create an accordion with expandable/collapsable content in your prototypes using Dynamic Panels with vertical layouts.
expandable collapsible content
To create expand/collapse behavior using dynamic panels, follow the steps below:

  1. Drag a Rectangle, Text, and Triangle widget onto the Canvas and customize them to match our example. We’ll use the Triangle as an arrow that will allow the user to expand or collapse the panel during simulation.text widget triangle
  2. Then, drag a Paragraph widget below the Rectangle and change its width to match the Rectangle’s.paragraph widget
  3. Select all the elements on the Canvas, right click within the selection, and select “Group in Dynamic Panel”.group dynamic panel
  4. Go to the Outline palette, right click on Panel 1, and select “Duplicate panel”. You’ll see a second panel (Panel 2) appear in the Outline palette.outline palette
  5. Back in the Canvas, go to Panel 1 of the Dynamic Panel (navigate to it from the drop-down at the top of the Dynamic Panel) remove the Paragraph from this panel and then resize the panel so its height matches the Rectangle’s. Then go to Panel 2, select the Triangle, and change its “Rotation” to “0°” in the Properties palette.
  6. Select the Triangle in Panel 1 and go to the Events palette. Click the “Add Event” button and add an “On Click” + “Set Active Panel” event, selecting Panel 2 from the Outline palette as the panel to be set as active.
  7. Now go to Panel 2, select the Triangle, and go to the Events palette. Add an “On Click” + “Set Active Panel” event, selecting Panel 1 from the Outline palette as the panel to be set as active.
  8. To add more expand/collapse sections, drag another dynamic panel to the Canvas. Give it the same width as your original Dynamic Panel, and make sure the layout is set to “Vertical”.layout vertical
  9. In the Outline palette, place the original Dynamic Panel (Dynamic_Panel_1) inside the Dynamic Panel you just dragged to the Canvas (Dynamic_Panel_2).dynamic panel inside
  10. Still in the Outline palette, right click on Dynamic Panel 1. Click “Duplicate”.duplicate dynamic panel Repeat this step for each expandable/collapsible section you want to include.
  11. Change the content within each Dynamic Panel. Remember that each Dynamic Panel has two panels within it – you’ll have to change the content for both internal panels.change content dynamic panel
  12. Click “Simulate” to view and interact with your expandable and collapsible content.

You can download our example here.