Accordion
A vertically stacked set of headings that each toggle a region of content open or closed.
›What's a popover?
A small panel anchored to a trigger element.
›How does it differ from a modal?
Popovers are non-blocking and dismiss on outside click.
›Native HTML support?
Yes — the `popover` attribute now ships in major browsers.
Each header is a button; clicking it expands or collapses the content below. Some accordions allow multiple sections open at once, others restrict to one at a time. ARIA calls a single toggle a 'disclosure' and a grouped set of them an 'accordion' — most designers and developers just say accordion either way. The native HTML `<details>` element implements a single disclosure for free.
Also called
disclosureexpand-collapseshow-hidedetails panel
When to use
- FAQs and reference content where most users only read a few sections
- Settings or filters with secondary detail that doesn't need to be always visible
- Long forms broken into collapsible groups
When not to use
- Critical content the user must see (hiding it costs reads)
- A single short section — no need for a toggle
Related
Source
W3C ARIA Authoring Practices Guide. Native HTML: `<details>` and `<summary>`.