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!