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 palette.

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. We’ll use the Triangle as an arrow that will allow the user to expand or collapse the panel during simulation.
3. Then, drag a Paragraph widget below the Rectangle and change its width to match the Rectangle’s.
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, right click on Panel 1, and select “Duplicate panel”. You’ll see a second panel (Panel 2) 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 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.
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 as the panel to be set as active.
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 as the panel to be set as active.
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 each 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.