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.

expandable collapsible content

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.
    • resize rectangle
  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.
    • text widget triangle
  3. Then, drag a Paragraph widget below the Rectangle and set its width to match that of the Rectangle.
    • paragraph widget
  4. Select all the elements on the canvas, right click within the selection and select “Group in Dynamic Panel”.
    • group 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.
    • 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”.
    • layout 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).
    • dynamic panel inside
  11. Still in the Outline palette, right click on Dynamic Panel 1. Click “Duplicate”.
    • duplicate dynamic panel
    • 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.
    • change content dynamic panel
  13. Click “Simulate” to view and interact with your expandable and collapsible content.

You can download our example here.