Accordions & Disclosure

Somebody arrives from a search result looking for the refund window. They cannot see it, and neither can the browser's own find command, because the text is not on the page until a row is opened. So they open rows until they get bored, then contact support, which is the outcome the page existed to prevent.

Collapsing is the most recommended move in this whole library. Six other modules reach for it when something does not fit. A long pricing table, a deep mobile menu, a sidebar running off the screen, a set of tabs on a phone.

None of them says how to build one, and the reason it gets recommended so freely is that it makes a page look shorter without making it smaller. The content is still there, and the cost has moved onto the reader.

Anatomy of a Disclosure

Two components get called an accordion, and only one of them usually is.

The Parts

Four, and the whole pattern is built from them.

The trigger, which is the row somebody presses. The label on it, naming what is inside. The indicator, usually a chevron, showing whether it is open. And the panel, holding the content. The trigger and the panel together are one unit, and the indicator is part of the trigger rather than a decoration beside it.

Disclosure or Accordion

One of each, and the difference is the set.

A disclosure is a single trigger and panel, standing alone. Show more under a truncated description is a disclosure. An accordion is a set of them stacked, related to each other, where opening one may or may not close the others. The WAI-ARIA Authoring Practices describe both, and the distinction matters because the second carries a decision the first does not.

One at a Time, or Many

That decision is whether the set is exclusive.

One at a time keeps the page short and means opening something closes what somebody was reading, which is unhelpful whenever two sections might be compared. Many at once lets somebody open everything, which defeats the purpose of collapsing. That is fine, because a person who opens everything has told you the content should not have been collapsed. Default to many unless the panels are real alternatives, and if they are, Tabs & Segmented Controls may be the better component.

What the Pattern Actually Trades

Everything else in the module follows from one property.

Collapsed content is not on the page. It is not visible, not scanned, not searched by the browser's find command, and not read by anybody who does not press something first. That is the trade: vertical space in exchange for a click and a chance of never being seen. Article 3 is about what deserves that trade.

Pro tip: Count how many of your collapsed sections a person would need to open to make the decision the page is for. If it is most of them, the page has been folded up rather than shortened.