Accordion
Stacked headers that expand to reveal one or more content panels. The click-to-open FAQ list.
See it
What it is
An accordion is a stack of headers, each of which expands to reveal its own panel of content. One header plus one panel on its own is a disclosure (the native version is HTML's details and summary elements); an accordion is several of them grouped, often in 'single' mode where opening one closes the rest. Every FAQ page you have ever scrolled is the canonical example.
Reach for it when the content is genuinely secondary, scannable by heading alone, and people only need one or two pieces of it: FAQs, advanced settings, per-section terms, mobile filter groups. Tabs are the alternative when the sections are equal siblings you compare between; accordions are better on narrow screens because they stack instead of squeezing.
Gotchas: hidden content is content people will not read, so never bury anything essential behind a click just to shorten the page. Animating the open/close is the classic CSS trap, since height cannot transition to 'auto' (use the grid-template-rows 0fr to 1fr trick, or interpolate-size where supported). And the header must be a real button with aria-expanded and aria-controls, otherwise keyboard and screen reader users get a div that silently does nothing.
Ask AI for it
Build an accordion: a vertical stack of items, each with a full-width header button (left-aligned label, chevron icon on the right that rotates 180 degrees when open) and a content panel below it. Default to single-open mode so opening one item closes the others, with a prop to allow multiple. Animate the panel with the grid-template-rows 0fr to 1fr technique over 200ms ease-out plus a content fade, and respect prefers-reduced-motion. Use real buttons with aria-expanded and aria-controls, a hairline divider between items, and a visible focus ring on the header.