components icon

Accordion

Accordions are a list of headers that expand and collapse to reveal hidden content blocks. They help reduce scrolling and shorten pages.

Status

PublishedElement can be used in production
Documentation
PublishedElement can be used in production
PublishedElement can be used in production
Adobe XD
Adobe XD Kit
In backlogElement is in backlog
Web Components
In backlogElement is in backlog
React
React
In backlogElement is in backlog
Angular
Angular
In backlogElement is in backlog

What's new

The latest iteration of the accordion includes an expand-all or collapse-all function, as well as accessible colors and text. This version also provides variants for alternate use cases, such as lists and related information.

Anatomy

Diagram showing the different parts of the accordion, marked from 1 to 9.

Featured in this anatomy is a single-level accordion with a nested multi-level accordion.

  1. Expand-all or collapse-all function: open or close all accordion rows.
  2. Divider: horizontal rule between expand or collapse function and the accordion.
  3. Accordion heading: descriptive label.
  4. Expanded single-level accordion: chevron to expand or collapse single-level accordion.
  5. Single-level panel: revealed content.
  6. Multi-level header: descriptive label for the nested level.
  7. Expanded multi-level accordion chevron: trigger to expand row.
  8. Expanded multi-level panel: revealed content.
  9. Multi-level divider: horizontal rule separating accordions.

View more/less

Feedback