uiuxindexUI & UX, indexed.
uidisclosurenavigationprogressive-disclosure

Accordion

An accordion is a vertically stacked list of headers, each of which expands to reveal a panel of related content when clicked, hiding the others to keep the surface compact.

Explanation

Accordions are a form of progressive disclosure: they let a single page present a lot of related but secondary information without overwhelming the reader. The pattern shines for FAQs, settings groups, and feature lists — anywhere users want to scan headings first and dive into a detail only when it interests them.

Two design decisions dominate every accordion. First, whether multiple panels can be open at once. Single-open enforces focus and keeps the page short, but every section switch costs the user a click; multi-open lets users compare two sections side by side, at the cost of more vertical scroll. Second, whether any panel is open by default. Opening one hints what to read first, but defeats the compactness of the pattern if used without intent.

Don't use an accordion when each section's content is short enough to display inline anyway — hiding two sentences behind a click costs the user more than the space it saves. Avoid hiding critical information behind a collapsed panel; users may not realize there's more to read. And avoid deep nesting: an accordion inside an accordion is almost always a sign the content needs a different shape entirely.

Accessibility is mostly about getting the markup right. Headers must be real <button> elements, not styled <div>s — only buttons get keyboard focus and pointer events for free. The open state is exposed to assistive tech via aria-expanded on the button, and each panel is associated with its header via aria-controls. A correctly-built accordion behaves the same for keyboard and screen reader users as it does for mouse users.

Examples

Mechanics

Single open — one panel at a time

Opening a section automatically closes whichever one was previously open. Keeps the page compact, costs a click to switch between sections.

Multi open — any panel independently

Each section toggles independently. Useful when the user might want to compare two sections side by side or skim several at once.

One panel open by default

Showing one section already expanded is a strong hint about what to read first. Use it for the most important section, or for an entry point into the rest.

A growing reference of UI and UX terminology, ideas, and principles — every entry is explained, then demonstrated with components you can click and play with.

Common use cases

Frequently asked questions

The canonical use — many short answers to many short questions. Users scan the headings, expand the one that matches their question.

A growing reference of UI and UX terminology, ideas, and principles — every entry is explained, then demonstrated with components you can click and play with.

Settings grouped into sections

A long settings page becomes scannable when each group of related preferences collapses into a single header. Single-open works well here; users usually focus on one group at a time.

With a disabled section

Sometimes a section is intentionally locked — keep the heading visible (so users know it exists) but disable interaction. Communicate why it's locked elsewhere on the page or via a tooltip.