Mockplus - Design Faster. Collaborate Better.

Blog > Inside Mockplus > How to Create an Accordion Menu with Mockplus Quickly?

How to Create an Accordion Menu with Mockplus Quickly?

Jun 14, 2017

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:


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, where you will get both text introductions and video tutorials.

Summer ye

In- house content editor, specialize in SEO content writing. She is a fruit lover and visionary person.

What's Mockplus?
Mockplus Cloud

A design handoff and collaboration platform to streamline your entire product design workflow.

Mockplus RP

A fast and free online prototyping tool that makes your ideas fly.

Mockplus DT

A vector-based UI design tool enables you design in the way you want to.

Mockplus DS

Your single source of truth to build, maintain and evolve design assets in one place.

Free prototyping, design handoff and collaboration

Join millions of Mockplus users to create the world’s best product

Sign Up For Free