The Accordion
also known as: The Collapsible, The Disclosure Centipede, The FAQ Beast
"The answer I required was in one of the seven segments. I opened the first. I opened the second. At the fourth, the first closed. I do not know if this was intentional. I am not certain the designers knew either."
— Account of Pell Oster, Documentation Warden, quarterly expedition into the Settings Panel
The Accordion is a segmented creature, its body composed of stacked header-and-content pairs that expand and collapse independently — or, in the more temperamental exclusive variant, enforce a strict single-opening restriction that collapses the currently expanded segment when a new one is opened. Which behaviour is correct remains one of the Codebase's older disputes. The Heuristic Order recommends permitting multiple open segments unless screen space is genuinely constrained; the opposing faction holds that a user who has opened two segments simultaneously has lost control of the dungeon. Both factions have valid grievances.
The creature's interaction model is simple but carries one hazard: each header must be an accessible, focusable element with appropriate ARIA attributes — specifically aria-expanded on the trigger and aria-controls linking trigger to panel. Implementations that style a div to look like an Accordion header without the underlying semantics produce a creature that is indistinguishable from a functional Accordion to sighted users, and entirely opaque to everyone else.
Fig. V — An Accordion with its first segment fully expanded; four remain closed, eyes dormant. Chevrons: upward (open), downward (closed). The feet suggest this specimen has been moving through the dungeon.
swords Vital Statistics
auto_awesome Special Abilities
shield Weaknesses
- Ctrl+F / in-page search — most browsers cannot search within collapsed panels; content hidden from find-in-page is effectively hidden from many users
- A flat layout — if all content fits without excessive scrolling, simply showing it defeats the Accordion without ceremony
- Tabs — for mutually exclusive parallel categories, Tabs are semantically superior
- Correct ARIA —
aria-expanded,aria-controls, real<button>elements on every header
category Known Variants
- The Exclusive Accordion — one panel open at a time. Efficient. Occasionally infuriating.
- The Nested Accordion — an Accordion inside an Accordion. Technically possible. Considered an act of aggression against the user.
- The Details/Summary — HTML's native disclosure element. Accessible by default. Animated by nobody. Underused.
- The FAQ Accordion — the creature's most natural habitat. Performs well. Earns its keep.
edit_note Field Notes
Note I. — If users frequently need to compare content between two panels, the Accordion is the wrong creature. The desire to compare is a signal that the content should be visible simultaneously.
Note II. — The chevron direction debate: does it indicate the current state (down = open) or the action clicking will perform (down = will close)? Pick one and apply it with perfect consistency. The debate is not resolved; it only matters that you have resolved it.
Note III. — Always use a real <button> element for the header trigger. A styled div masquerading as a button is accessible only to those who can see it — which is, consistently, not the people most in need of accessibility.