Skip to content

Accordion

Accordions are collapsible content containers that let users reveal or hide sections of content. They reduce cognitive load by surfacing only the most relevant content on first glance and letting users choose how deep to dig.

Ready to use

DesignDevelopAccessibility

This component is fully responsive and intentionally designed to be used across all viewports — mobile, tablet, and desktop — with no alternative versions required.

Anatomy

Section titled “Anatomy”
Accordion title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

  1. Accordion
  2. Trigger
  3. Title
  4. Chevron
  5. Content

When to use it

Section titled “When to use it”

Use the accordion when:

  • You need to present several groups of related information, but not all of it needs to be visible at once.
  • You want to reduce visual clutter and keep the page easier to scan.
  • Users may only need to access some details depending on their specific needs or interests.
  • You want to avoid long scrolling, especially on mobile devices or content-dense pages.
  • The content in each section can be understood independently from the rest.

Avoid the accordion when:

  • The content is essential for understanding the page and should remain visible without interaction.
  • Users need to compare information across multiple sections at the same time.
  • The page only contains one section of information (in that case, display it directly).
  • Frequent opening and closing would interrupt the user’s workflow or slow them down.

Properties

Section titled “Properties”

Accordion

The whole disclosure component — a <details> element that owns the open/closed state and wraps the trigger and content.

Trigger

The row that toggles the accordion. Always keyboard-focusable; the title text doubles as the accessible name.

Title

The label inside the trigger that names the disclosure and carries its accessible name.

Chevron

A chevron that rotates between collapsed and expanded states. Decorative — the open/closed state is also conveyed via aria-expanded.

Content

The collapsible content region. Hidden from assistive tech when collapsed and revealed in document order when expanded.

Platform considerations

Section titled “Platform considerations”

Desktop

On desktop the full accordion stack is visible at once. Keep the trigger row tall enough for comfortable pointer targets and let the panel content flow naturally without artificial caps.

Tablet

The same stack adapts to narrower widths. Respect the 44×44 px touch target on the header so the component remains comfortable to tap.

Mobile

On mobile, prefer single-item expansion to reduce scroll jumps. Keep titles short so they fit on a single line at the smallest breakpoint.

Best practices

Section titled “Best practices”

Use the accordion to progressively disclose detail — never to bury content users actually need.

Do

Group related items, write concise scannable titles, and keep consistent spacing between accordions to support visual rhythm.

Don't

Avoid nesting accordions, hiding essential information, or stacking more items than a user can reasonably scan in one view.

Content guidelines

Section titled “Content guidelines”

Keep titles short and scannable — typically one line. Lead with the keyword that helps users identify the content at a glance, and use sentence case for readability (for example “Account details”, not “ACCOUNT DETAILS”). When several accordions sit together, write titles in parallel structure (all nouns or all verbs) so the group reads as a coherent set. Avoid hiding content that users need on every visit; if it’s critical, show it directly instead.