Learn how to prototype web and mobile apps

How to design accordions in your interactive wireframes

Design accordions in your interactive wireframes with the help of this tutorial.

The accordion effect allows you to provide multiple panes and display them one at a time, through expanding and collapsing behavior.

You can download the example below here.


Design accordions in your interactive prototypes


1) Create a new web prototype.

2) Drag a Dynamic panel widget onto the canvas.

3) Add 3 additional panels, by clicking on the symbol ‘+’. Each panel should contain one of the four states of your accordion: first option displayed, second option displayed, and so on.

4) In the first panel, add your preferred widgets (in our example: 4 rectangles, an image and a paragraph widget) and position them as you see in the image above. 

5) Select the first rectangle, click on “add event” and add an ‘On click’ + ‘Set active panel’ event, selecting panel 1 in the outline tab in the events dialog. 

You can add various effects to the ‘Set active panel’ event, and you can choose a different trigger, for instance the ‘On mouse over’ instead of the ‘On click’.


6) Do the same for rectangle 2, rectangle 3 and rectangle 4, setting as active panels – respectively – panel 2, panel 3 and panel 4.

7) Now select and copy all the rectangles, go to panel 2 and paste them there, reorganizing their position like in the example above, and adding the widgets you want to show in panel 2 (in this case, a list).

8) Follow the same steps for panel 3 and panel 4.

9) Now you need to change the style of the active tab for each panel. To change the style of each panel, you will need to add an action to each rectangle. Starting with rectangle 1, click on the gear next to the ‘do’ option and select ‘Add Action’. Add an ‘On Mouse Over’ + ‘Change Style’ event, selecting rectangle 1. Change the color of the background below, by ticking the ‘rectangle’ box and changing the color. Click OK.


10) Do the same for rectangles 2-4, selecting the relevant rectangle each time.

And that’s all! Click on ‘Simulate’ and enjoy!

Next tutorial > Expand and collapse content with Dynamic Panels in your prototypes


  1. Dominic

    October 14, 2014 at 4:24 pm

    Is there a video to go with this? The textual description doesn’t really seem to explain everything. Is there a true walk through of this process?

  2. Starry

    October 23, 2014 at 3:35 am

    I use JustInMind Prototyper 6.2 for mac
    add event on mouse hover to set active panel, but use firefox or Sarari browser preview, on mouse hover panel is Flashing, pls help…

    • admin

      October 28, 2014 at 9:28 am

      Replace the ‘on mouse over’ event by an ‘on mouse enter’ one