Disclosure
The show-and-hide behaviours. Each one toggles regions of content — the differences are how many regions can be open at once and how the user moves between them.
The pieces
| Component | Regions open at once |
|---|---|
| Collapsible | One region — a single toggle |
| Accordion | One or many — a set of linked Collapsibles |
| Tabs | Exactly one — sibling panels, one always visible |
One shape, three policies
All three share a Trigger-plus-Content shape. They differ in their open policy. Collapsible is the
atom: one trigger, one region, open or closed. Accordion links several Collapsibles through
context, with a type of single or multiple deciding whether opening one closes the others.
Tabs is the always-one case — a row of tabs over sibling panels, exactly one panel showing at all
times.
Tabs is not an Accordion
Tabs and a single-type Accordion both keep one region visible, but the patterns are distinct. Tabs
presents its triggers as a row and is for switching between peer views — Account, Security,
Billing. Accordion stacks its triggers and is for progressive disclosure of a list — an FAQ, a
settings group. The ARIA differs too: Tabs uses tablist / tab / tabpanel, Accordion uses
disclosure regions.