How to Create an Accordion Menu with Mockplus Quickly?

Doris
Jun 14, 2017
225150
5 min read

Accordion menu is among those most commonly used menus on GUI. To make this kind of menu with prototyping tool, a repeater is in need. It’s difficult to achieve this even with the powerful Axure. But if you know something about Mockplus, you will be familiar with the “Panel”component built in it, with which one can create an accordion menu quickly in 3 steps.

Accordion menu made with Mockplus

Let’s see the operations:

Step 1: Select “Panel” Component and customize it

Find the “Panel” component on the left and drag it to the working area. To save time I put a “List” component in this panel and copy them for two times. Then, I name the second panel “Panel 2”, the third panel “Panel 3”.

Panel: when resizing the panel, the size of its content doesn’t change.

select panel in Mockplus

Customize panel in Mockplus

Step 2: Build interactions

Reduce the three panels until there are only the header can be seen. Select the first panel and click “+” on the interaction setting place on the right of the interface and select “Panel”.Then, tap on “resize” and check the “auto recovery”. Enter the pixel number you need to expand the panel to its original size and the first interaction was built. This interaction enables the panel expand to show the full list when users clicking on the header.

Build interaction to resize panel

 Resize panel

Let’s turn to the second interaction.Select the “Panel”, click “+” on the right and select “Panel 2”. Tap on “move”and then check the “auto recovery”. Enter the pixel number you need to move the second panel when the first one expanding.

Build interaction to move panels

Step 3: Build interactions for panel 2 and 3 according to the above two steps

Now, a simple Accordion Menu is created. You can also add other components to this menu to make it beautiful.

Let’s see what interactions each panel has:

Panel:

Link to itself: resize

Link to Panel 2: move

Link to Panel 3: move

Panel 2

Link to itself: resize

Link to Panel 3: move

Panel 3

Link to itself: resize

Isn’t it easy? One panel component and two simple interactions create an accordion menu. Although Mockplus is an easy-to-use prototyping tool, with it you can realize many complicated interactions and achieve amazing effects.For more tutorials of Mockplus, please go to doc.mockplus.com, where you will get both text introductions and video tutorials.

Free prototyping tool for web and mobile app design
Get Started for Free
Free prototyping tool for web and mobile app design
Get Started for Free
Free prototyping tool for web and mobile app design
Get Started for Free
What's Mockplus?
Mockplus RP

A free prototyping tool to create wireframes or interactive prototypes in minutes.

Mockplus DT

A free UI design tool to design, animate, collaborate and handoff right in the browser.

Free web & app prototyping tool
Create wireframes or highly interactive prototypes in just minutes.
No time limit Up to 10 users
Get started
No, thanks, i'm good.