[Pattern] Accordion

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
  • 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