Overview
The accordion is a vertically stacked content area which can be collapsed and expanded to reveal or hide its contents. An accordion can be open or closed independently from its surrounding counterparts (i.e: multiple accordions can be open at the same time). When used right, accordions can help browse different pieces of related content in a more efficient way. Be wary that they can also hide content from users and are not suitable when a user is meant to read all of the page content.
General Usage
When to use
Accordions are helpful in the following cases:
- Have an overview of content sections related to each other
- Allowing the user to show and hide different sections of the content
- See information at a glance which could be on different pages otherwise
When not to use
It’s not recommended to use accordions when the page content must be seen by a user, as they hide content and it’s not certain that all users understand how they work. Consider restructuring your content without an accordion first or alternatively use anchor links in the beginning of the page which redirect the user to specific sections of the page. We do not recommend nesting accordions within accordions, as it hinders discoverability enormously.
Heading sizes
Accordions can use H2-H5 as well as Paragraph sizes for the header portion. Use the right heading size based on the surrounding content.
Mobile
- Consider that accordions can become very tall on mobile, so oftentimes users need to scroll before closing an accordion, taking more time than its equivalent on Desktop.
- Be wary of using long titles with the H2 or H3 variants as they will wrap in multiple lines on smaller resolutions. Try to keep the amount of line rows under three.
#Variants
Closed
Variants | Description | Appearance |
---|---|---|
H2 | Closed accordion with H2 heading | |
H3 | Closed accordion with H3 heading | |
H4 | Closed accordion with H4 heading | |
H5 | Closed accordion with H5 heading | |
P | Closed accordion with P paragraph |
Open
Variants | Description | Appearance |
---|---|---|
H2 | Open accordion with H2 heading | |
H3 | Open accordion with H3 heading | |
H4 | Open accordion with H4 heading | |
H5 | Open accordion with H5 heading | |
P | Open accordion with P paragraph |
Behaviour
Closed
By default accordions are closed.
Note: Accordion headers and navigations should not include any links or other interactive elements as that could interfere with the accordion interactions for expanding and collapsing.
Hover
On hover the background of the header will change to a light gray. The whole heading row can be hovered/ is clickable, not only the chevron icon. This ensures that users can interact with accordions with higher confidence.
Open
The accordion expands vertically and the chevron transforms from pointing right to downwards. Chevron animations help guide users following the accordion states (closed or open).
Questions to ask yourself before using this
- Can I use the tabs instead?
- Do users need to switch quickly between sections?
- Tabs might be better suited than accordions.
- Is there a concern for horizontal space?
- If yes, consider accordions or alternatives options.
- Am I nesting critical information needed for the user in an accordion?
- If yes, consider using tabs or alternative options
- Do users need to switch quickly between sections?
- Am I choosing the right heading size for the accordions?
- Consider your surrounding content hierarchy to decide which heading suits best for your accordion
- Are page loading times sensible? Make sure not too much content is nested within the accordions as that delays the page loading times considerably.
- Do users need to switch quickly between sections?
- If yes, use tabs.
- Do users need to look at multiple sections at a time?
- If yes, use accordions
- Is there enough horizontal space to use tabs instead?
- Accordions scale up vertically whereas tabs horizontally. If there is limited horizontal space, accordions might be more suitable.
References
- Accordion component research updates (GOV.UK, 2021)
- Accordions Are Not Always the Answer for Complex Content on Desktops (Nielsen Norman Group, 2014)
- Designing The Perfect Accordion (Smashing Magazine, 2017)