Accordion

When to use accordions

1. You want to hide or show long sub-content based on headlines
2. You have in-page content with excessive content length that could distract from the experience
3. If vertical space is limited, and there is enough content to condense

 

 

Behavior

Closed by default

Accordions are initially closed. You can choose to open the first one as a default option.

 

Clickable header

Instead of only relying on the icon, let users click anywhere in the header to open or close the accordion.

 

Multiple accordions open

On default, accordions should automatically close when another is opened. You can choose to allow multiple accordions to be open at the same time.

 

 

Best practices

Nested accordions are a no-no

Never use nested accordions, as this can complicate navigation and confuse users.

 

Order by priority

Consider your content and order by priority or importance. If there is none, use alphabetical ordering.

 

Use sentence case for titles

For best readability, stick to sentence case unless necessary. Use shorter, but descriptive titles to avoid wrapping.

 

Don’t get too jumpy

Make sure the user doesn't lose their place on the page when they open or close an accordion.