Blog Subscribe

SIGN UP to SUBSCRIBE

To get the latest and most quality designer news.

WHAT IS MOCKPLUS?

Mockplus is a desktop-based tool for prototyping mobile, web and desktop apps easily and quickly. Create interactions by simple drag-and-drop and your teamwork will be time-efficient with the collaboration features.

Tell me more
<< Blog

How to Create an Accordion Menu with Mockplus Quickly?

Mockplus Team 6112 Views

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.

STILL HUNGRY FOR THE DESIGN?

_____

Mockplus is a desktop-based tool for prototyping mobile, web and desktop apps easily and quickly. Create interactions by simple drag-and-drop and your teamwork will be time-efficient with the collaboration features.

Free Trial