Accordion

EXPLAINED SIMPLY:An accordion is a stack of collapsed sections that expand when you click them, most familiar as an FAQ where each answer unfolds beneath its question.

By Cathryn Lavery

An accordion is a stack of collapsed sections that expand when you click them, most familiar as an FAQ where each answer unfolds beneath its question.

The name is the instrument: pleats that expand and squeeze shut. The picture is the pattern's natural habitat, a "Common questions" list with one answer unfolded and the rest still closed. The chevron at the end of each row flips upside down when its section opens, the small affordance that tells you these rows do something.

Accordions exist to fit a lot of content into a little space without making anyone scroll past all of it. The reader chooses what to expand, which means the reader also chooses what to skip. That's both the feature and the catch.

The catch deserves respect. Whatever you fold into an accordion, most visitors will never open it. The return policy, the safety warning, the price: none of those belong behind a fold. Questions and optional detail are where the pattern shines.

You'll also hear "expandable sections," "collapsible sections," and "disclosure," the formal spec word for a single one of these rows.

When a page is drowning in questions and answers, ask for an accordion. When it's something everyone has to read, leave it unfolded.