Accordion

Definition

An accordion is a collapsible list that shows only the headings stacked vertically, then reveals the hidden content beneath a heading when the user clicks it. Most of the time the whole list stays neatly folded, so the screen is easy to scan at a glance, and you just open the one item you're curious about. The name comes from the musical instrument: like the bellows of an accordion stretching and shrinking, the content only expands when it's needed. The most common example is a FAQ. Laying out dozens of questions all at once makes the page stretch on forever, but folding them into an accordion lets each person open just the single question they care about and read the answer.

Why does it matter?

When there are many items but the user doesn't need to read all of them at once, an accordion saves a huge amount of space. The folded list of headings acts like a table of contents, letting people survey the overall structure first and then open only what interests them to go deeper. This way users reach the item they want directly, without scrolling past content they don't care about. It looks similar to tabs, but there's a crucial difference. Tabs show one panel at a time and sit side by side horizontally, whereas an accordion stacks vertically, can have several sections open at once, and puts far fewer limits on content length. That makes it especially well suited to variable content whose length is hard to predict, like uneven explanations or lists of settings.

Common mistakes

• Folding away information that's genuinely important and everyone needs to see. Collapsed content takes one more click to reveal, so if you hide a key instruction or warning, a large share of users will pass right by without ever knowing it exists. Don't fold what people must read; leave it expanded from the start.
• Missing or unclear indicators of the open state. If the arrow direction or icon doesn't change between open and closed, users get confused about whether they've already opened an item or whether it's even clickable, and they end up pressing the same spot over and over.

Practical tips

• Decide up front whether only one section opens at a time or several can be open together. If people need to compare items, allowing multiple to open works better; if keeping the screen short matters most, a single-open pattern is better. Mixing the two makes the behavior hard to predict.
• Signal the open state clearly with an obvious cue, like the direction of an arrow. The icon for closed and open needs to look distinctly different so users can read the current state at a glance and never lose track of what they've left open. Making the clickable heading area generous also helps the pointer land less often on the wrong spot.
• Write labels specific enough that the heading alone hints at what's inside. If a heading is vague, users end up opening and closing item after item to find what they want, which defeats the whole point of saving space in the first place.

Related concepts