Coming up with a brand new solution every time we encounter an interface problem is time-consuming and risky because we just don’t know how much time will be needed to implement a new solution and whether it will gracefully succeed or miserably fail in usability tests. Therefore, as designers, we tend to think of design patterns as generic off-the-shelf solutions that can be applied to various contexts almost mechanically, and without any consideration more often than not. Design patterns can be extremely helpful, mostly because they save time and get us better results, faster. One such design pattern is the Accordion menu.

An accordion menu is a vertically stacked list of headers that can be clicked to reveal or hide content associated with them. It is one of many ways you can expose content to users in a progressive manner. Allowing people to have control over the content by expanding it or deferring it for later lets them decide what to read and what to ignore.

There is a good reason why the accordion is very common in responsive design. It’s an immensely useful pattern for progressive disclosure. Accordions are more of content management tools. When you have a page that’s broken into dozens of paragraphs, links, images, or just too many blocks of content, accordion menus come to your rescue.

Not every website needs an accordion menu and you certainly won’t find them all the time. But that’s no reason to ignore the concept entirely. The purpose of an accordion menu is to manage an overabundance of content through dynamic switching. So when exactly should you use accordions? Mostly with larger menus or content which might behave cleaner using expandable sections. These could be sub-headings or even multiple levels – the point is to organize content in a way that makes navigation simpler than endless scrolling.

Sliding Menu Effects

One of the most common interfaces you’ll experience is the sliding menu effect. This is usually vertical with a series of links hidden within sub-links. Clicking on a primary link will then expand the list of sub-links in a sliding animation. Sometimes a website’s entire navigation menu is built on this accordion effect. Other common choices are dropdown menus which appear on hover – but accordion menus don’t slide over the page since they’re built into the page. So the effect is somewhat different and offers a different user experience by comparison.

Sliding Portfolio

Webpage content is managed via alternate pages for simplicity and ease-of-use. Visitors would rather browse through different pages rather than sift through a long single-page design. However, working with collapsible accordion content makes the latter a lot more reasonable. portfolio sites can be an excellent choice for accordion widgets. Not every project should rely on accordions to best manage content. But think of the control you can offer visitors by organizing projects into larger categories and even sub-categories. Make use of this sparingly but keep it in mind.

CSS3 Tabbed Content

Another example of accordion content is based on tabbed widgets. So instead of having links listed vertically, tabs are used to manage shifting content. This is another really popular method of content management because JavaScript has made the process super easy. An alternative to JavaScript is the expandable accordion UI with CSS3. Granted they both seem like a risk but CSS3 has much less browser support. The only benefit is that CSS3 doesn’t require as much code and offers a simpler method of animation.

Image Galleries

In a similar vein as the portfolio listing is a collapsable image gallery. In accordion-style, this can take many forms as vertical, horizontal, slidable, tabbed, and more. Both CSS3 and JavaScript can be used to create menu effects in the image galleries. Unfortunately, older browsers will never be backward-compatible to support new CSS3 animation. Working with JavaScript is still the safest choice, but as more people upgrade their web browsers we can hope to see a future with primary support for CSS3.

Tabs v/s Accordion Menu

Both tabs and accordions serve their own purposes beautifully! There are many amazing websites that use tabs, and many that use accordions and they are all beautiful in their own ways. So, when to use tabs and when to use Accordions? Here are some factors which will influence your choice:

How Much Data You Have Under Each Section?

If you have only 3–4 categories, but the data is way too much, then there are chances that accordions might be a bad option to use. Consider using Tabs.

What Is The Architecture That Your Website Is Following Throughout, On Every Page?

If your website has vertical navigation throughout, you should go with accordions to keep the pattern the same, and to keep the user comfortable throughout the website.

What Is The Length Of Your Categories/Options? 

If they’re too long, then accordions are a better choice rather than tabs!

These are just some of the examples where you can consider using tabs or accordions.

Benefits Of Using Accordion Menu

• Collapsing the page minimizes scrolling.
• The headings serve as a mini-IA of the page. This allows users to form a mental model of the information available.
• Hiding (some of) the content can make the web page appear less daunting.
• Accordions can be a better alternative to within-page links, which are problematic because they break people’s mental model for hypertext links. 

Usability Issues With Accordion Menu

• Forcing people to click on headings one at a time to display full content can be cumbersome.
• Accordions increase interaction cost.
• Hiding content behind navigation diminishes people’s awareness of it.
• Accessibility is an important consideration.

Read more about the Usability Mistakes That You Should Avoid here

You can always pick up a free plugin to rebuild something from scratch. Lots of developers release their code for free and try to help the community with free plugins. And of course, there will always be those who prefer to build everything from scratch. If you need more assistance, get in touch with our experts.