Designing expandable and collapsable content

With Justinmind, you can create an accordion with expandable/collapsable content in your prototypes using dynamic panels and the “Layout” option in the Properties tab.

By customizing the Layout of a Dynamic Panel, you can create fluid transitions between elements on-screen.

How to create expandable and collapsable content

To create expand/collapse behavior using dynamic panels, follow the steps below:

1. In a web prototype, drag a Rectangle to the canvas. Go to the Properties palette, resize it to 400px width, 50px height, and change its background color to match our example.
   • 
2. Drag a Text widget and a Triangle inside the Rectangle. Rename the Text element “Example 1” and customize the Triangle to match our example.
   • The Triangle will serve as the arrow that, when clicked duration simulation, will allow the user to expand or collapse the panel.
   • 
3. Then, drag a Paragraph widget below the Rectangle and set its width to match that of the Rectangle.
   • 
4. Select all the elements on the canvas, right click within the selection and select “Group in Dynamic Panel”.
   • 
5. Go to the Outline palette, and right click on Panel 1 and select “Duplicate panel”. A second panel (Panel 2) will appear in the Outline palette.
   • 
6. 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 resize the panel so that the height matches that of the Rectangle. Then go to Panel 2, select the Triangle and go to the Properties palette. Change the “Rotation” option to “0°”.
7. Select the Triangle in Panel 1 and go to the Events palette.
   • Click the “Add Event” button. Add an “On Click” + “Set Active Panel” event, selecting Panel 2 from the Outline palette. Click “OK”.
8. 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. Click “OK”.
9. 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”.
   • 
10. 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).
    • 
11. Still in the Outline palette, right click on Dynamic Panel 1. Click “Duplicate”.
    • 
    • Repeat this step for every expandable/collapsible section you want to include.
12. 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.
    • 
13. Click “Simulate” to view and interact with your expandable and collapsible content.

You can download our example here.