Here it is, our final part of the series on common UI design patterns. This time, it will be all about the accordion. You can find the previous parts of the series here:
- Part 1: The navigation bar
- Part 2: The tab navigation
- Part 3: The double-tab navigation
- Part 4: The doormat navigation
You have certainly heard of the musical instrument called accordion – that beautiful instrument, you play by compressing or expanding bellows and pressing buttons. The navigation element called “accordion” picks up this principle: In the realm of UI patterns, it refers to a horizontal or vertical panel including a two-tiered set of options: grouped visible top-level categories and hidden second-level categories. Clicking or hovering on one of the top-level categories, usually there are up to ten in total, reveals the associated, but so far hidden sub-content, often with a sliding effect.
The accordion navigation pattern, in general, is best used to display a large amount of information or options in a limited space. Also, it provides an overview of all available main categories. While the vertical alignment of the accordion helps to create a navigation path and to display sub-menu items, the horizontal accordion menu is a good choice to display large content areas.
Typical characteristics of the accordion are:
- each panel represents one group and stacks all the associated second-level content,
- each panel can be expanded to display the sub-categories, leaving the rest collapsed,
- usually a click or hover action opens the accordion’s panels,
- the most important panel is usually already open by default,
- the total number of panels should be kept small (up to 10) for a better overview.
Now that we have a good understanding of the accordion, let’s create one. Here is how it goes …
1. Setting up the project
The accordion navigation is best built from bottom to top, i.e. we start with the sub-categories, then aggregate them into the top-level categories, and finally combine them into the single accordion structure. First, we need pages on which to put the actual content, which I’ll call content pages – one for each sub-category. To save time, I recommend creating all the content pages in advance (we will add the respective content later). If you have X sub-categories, you should now have X content pages.
For the accordion menu itself, we will use one layer and several pages, which will become the panels or sections of the accordion that are shown when the accordion is expanded – one for each top-level category. Let’s call them panel pages (see step 2). In my example, the accordion will contain four top-level categories, i.e. four panels: “World”, “Business”, “Politics” and “Life”. In total, that’s X + 4 pages.
Each top-level category of the accordion expands to display a panel with all sub-category entries, represented by separate pages
2. Creating the accordion panels
The panels of the accordion are used to display the sub-categories when a top-level entry is clicked. For maximum flexibility, each panel is created on an individual page (see above) and referenced into the accordion menu (see step 3). To make the four panels in our example fit into the accordion, let’s resize the pages to 400 px width. You should also adjust the height of each page to the number of sub-category entries that need to fit. There shouldn’t be too much space – unless you want it there. Now, add the titles of the sub-categories to the panel pages using one or several link stencils.
Resizing the panel pages to fit to the accordion frame and the sub-category entries.
Finally, link the entries to the respective content pages, using a “click/tab” interaction, which shows the target page as an “instant link”.
Linking the sub-category entries of the accordion with the corresponding content pages.
3. Consolidating the accordion
Now we have all the building blocks in place to finally consolidate everything into the accordion menu. To avoid duplicate work, let’s create our accordion on a layer, which we will later display on each content page where it should be accessible. Create a layer by clicking on the “New layer” button in the My Layers panel. Next, add the “Accordion” stencil to the layer and resize it to 400 px width (or whatever width you gave your panel pages).
Adding the accordion stencil to the layer will open it for editing
The accordion stencil will automatically open up for editing. Now, let’s enter the names of the top-level categories. Each line represents a category entry. To display the correct panel upon click, we need to link each entry to the corresponding panel page. To do so, highlight the entry and select the target panel page from the dropdown menu.
Linking the top-level categories of the accordion menu to the corresponding panel pages
Voilà! This is what my “Business” category looks like (shown in a screenflow).
Linking a panel of the accordion menu to the content pages of the respective sub-categories, shown in a screenflow
Now, all that’s left to do, is going through the content pages and activating the accordion layer on each one by selecting the layer’s checkbox in the My Layers panel.
To see a preview of your accordion, click the “Simulate” button in the toolbar. Here is what my finished project looks like.
Preview of the finished project “Accordion Menu”
That’s it! You have successfully created an accordion! Do you need help building an accordion? Then do not hesitate and drop us a line via support@pidoco.com or Facebook and Twitter.
Happy Prototyping!