Accordion UI Design: Best practices, Design variants & Examples | Mobbin

Accordion UI

Written by

Jovin Liew

Platforms

iOS
Android
Web

Synonyms

Expandable Menu
Dropdown Panels

What is an accordion component?

Accordion is a vertical stack of collapsible containers that reveal or hide sections of content.

Users can click on the accordion headers to expand or collapse content panels, revealing more details only when they need them.
Some accordions allow only one section to be open at a time, while others support multiple open sections at the same time.
Accordion panels usually have animations to aid transitions so that the experience is smooth.

Accordions are commonly used in the following design patterns: FAQ, Product features or specifications, Filtering & sorting.

Fun fact: The term "accordion" in UI design is inspired by the musical instrument accordion, which expands and contracts to produce sound—just like how UI accordions expand to reveal content and collapse to hide it.

When to use Accordion?

Organizing large amounts of content
Accordions are ideal for FAQs, menus, or settings where content can be hidden until needed. Having them exposed by default might be overwhelming.
Progressive disclosure
Use when only some details need to be shown initially to reduce cognitive load.
Limited screen space
Useful on mobile or small screens where collapsing content saves space.

When not to use Accordion?

Minimal content
Avoid if sections contain only a small amount of text - using inline content works better in those cases.
Frequently accessed content
Avoid if users need to view multiple sections often. Tabs or Lists are more efficient.
Critical information
Avoid hiding important content that should remain visible at all times.

What is the anatomy of an accordion component?

Container
Title
Expand/Collapse icon
Content

What are the design variants of an accordion?

We studied over 2,600+ accordion UI components on Mobbin, from real-world examples and found the following variants.

1. Accordions can have stacked items, or just a single standalone item.

The most common forms of accordion are a stacked list of accordion items. Multiple sections stacked above one another.

These types of accordions are best for FAQ pages as they allow apps to convey by progressive disclosure and not overwhelming the users with too much content.

However, sometimes you'll find a solo accordion used - that is, a single accordion header and accordion item.

2. Accordions can have plus or chevron icons

The most commonly used icons in an accordion component is the chevron icon. Specifically, the up and down chevron icon.

By default, the chevron icon points downwards when the accordion item is hidden. When a user clicks on the accordion header, the chevron icon points upwards, exposing the accordion item.

Alternatively, we've also seen chevron icons pointing rightwards when the accordion item is hidden. When a user clicks on the accordion header, the chevron icon points downwards, exposing the accordion item.

Finally, a more modern accordion design pattern we've seen recently is the plus icon. A collapsed state usually has a + icon, while expanded states have a - (or x) icon. At Mobbin, we use the + and x icons in our FAQ accordion design.

3. List vs. card accordions

The most common accordion design patterns are lists.

However, we've seen a new design trend in accordions, where there is a list of expandable and collapsible cards.

When to use accordions?

FAQ page

To present a list of questions and answers. Each question serves as a collapsible header, and the corresponding answer is revealed when the user clicks or taps on the question.

Filtering & sorting

Accordions are also commonly used in filtering screens - especially when there are complex filtering needs, with a ton of filter options.

Product features or specifications

To display detailed information about a product's features, specifications, or options. This allows users to explore and understand the various aspects of a product without overwhelming them with excessive information.

Conflicting UI elements: Select, Disclosure button

Accordion vs. Select

While a select might share the same appearance as Accordion - with a chevron - they are not the same thing. Accordion displays content, while Select would display a list of options that when expanded.

Accordion vs. Disclosure button

Some disclosure buttons function similarly to an accordion to show/hide content. However, they are not accordions because:

Disclosure buttons appear as a standalone button, and not in a header
Disclosure buttons show partial information. On the other hand, accordions either show everything or nothing.
Disclosure buttons typically do not have a container
Disclosure buttons tend to have a text signifier as a way to expand and show content