Accordion

Accordion and Accordion Item work together to provide a vertically stacked list of headers that reveal or hide associated sections of content.

When to Use

To group related information into sections.
To keep pages shorter when content is not essential to read in full.
When space is limited (e.g. mobile layouts or side panels) and long content cannot be shown all at once.
Single Expand Mode
- content sections are mutually exclusive
- users should focus on one section at a time
- you want to reduce visual noise and scrolling
Multi Expand Mode
- users may need to compare or reference multiple sections
- content is not mutually exclusive
- users are likely to open several sections in one session
Default state: All collapsed
- you want to keep the interface compact
- users are expected to choose what to explore
Default state: Pre-expanded
- there is a recommended or most important section
- content is time-sensitive or critical
- you want to reduce interaction for common tasks
Heading levels
- the accordion is part of a structured page layout
- you need to maintain a logical and accessible heading hierarchy

For large, nested sets of information—use a tree view instead.
When users are likely to read all content—a full scrolling page with clear headings is easier than forcing extra clicks.
Content must be read in sequence
Sections are highly interdependent
Most users need to read all content

In these cases, consider displaying content directly instead.

Accordion content should be organised into clear, meaningful sections.

Best suited for:

Accordions can contain complex layouts and other components within each section.

Use this when:

Avoid nested accordions, as this can make navigation and comprehension more difficult.

Both Accordion and Tabs allow users to reveal content on demand. They serve different interaction patterns and should not be nested.

Use the guidance below to choose the right component for your use case.

Use Accordion when:

Use Tabs when: