accordion

name	accordion
description	Use when implementing expand and collapse content sections.
metadata	{"id":"accordion","category":"content-management","pattern":"Accordion","source":"uxpatterns.dev","url":"https://uxpatterns.dev/patterns/content-management/accordion","sourcePath":"apps/web/content/patterns/content-management/accordion.mdx"}

Accordion

Expand and collapse content sections

What it solves

An accordion consists of vertically stacked headers that expand or collapse to reveal or hide related content. Accordions conserve screen space by displaying content in a structured, interactive way. Accordions work well for FAQs, settings panels, and structured content where users access multiple sections without scrolling through everything.

When to use

Use accordions to present structured content benefiting from progressive disclosure. Common use cases include:

• FAQs (Frequently Asked Questions) – Users find answers quickly
• Settings and Preferences – Options organize into collapsible categories
• Product Details or Features – Users expand sections they're interested in
• Documentation or Guides – Step-by-step content stays organized
• Navigation and Filtering – Sidebars use them for hierarchical content

When to avoid

• All content needs simultaneous visibility (comparison tables)
• Content is too short—collapsing small text reduces usability
• Frequent section switching needed—tabs work better