Accordion

The amount a screen has to carry keeps growing, and vertical space does not. Lay out thirty frequently asked questions with all their answers showing and the page gets ten times longer, forcing anyone looking for their question to scroll past twenty-nine answers they don't care about. Exactly one of those entries is the one they came for.

Before folding was an option, teams had two ways out. They could break the content across several pages, which leaves people bouncing back and forth because nobody knows which page holds the answer. Or they could show a list of titles and send each click to its own page, which turns reading one line of text into a round trip, repeated ten times.

The scene where this bites is usually a checkout screen. Put shipping details, coupon entry, and terms consent on the page fully expanded, and the pay button gets pushed below the fold, where people can't find it and leave. Splitting the same content into tabs fixes the length but takes away the ability to see the three chunks at once.

An accordion sits between those two. Every title stays visible, every body stays folded, and people open what they need without leaving the screen. Nothing to navigate back from, and the list of titles keeps advertising what else is there. The name comes from the instrument whose bellows fold and open the same way.

The unit is a header paired with the content below it, and several of those pairs stack vertically. The default state is closed; clicking a header expands that pair's content, and clicking again collapses it. Four decisions shape the behavior.

1. How many can be open at once — allowing only one means opening a new section closes the previous one, which keeps the page a predictable length. Allowing several lets someone hold two sections side by side for comparison, but a person who opens everything is back to the long page you were trying to avoid.
2. What starts open — everything closed is the normal default. If nine out of ten visitors open the first item, though, start that one expanded.
3. How the state is shown — an arrow pointing down means this can open, and pointing up means it is open right now. Without that marker, people can't tell the row is clickable at all, and a header that looks like a heading gets read as a label rather than a control.
4. What the click target is — make only the arrow icon clickable and anyone who clicks the title text gets nothing and concludes the page is broken. The whole header row should respond.

Accessibility lands here as well. The header has to behave as a button rather than plain text so it can be reached with the keyboard and opened with the space bar, and so a screen reader announces whether the section is currently expanded. Collapsed content also stays invisible to the browser's find-on-page function, so anything people are expected to reach by searching should not be folded away.

Fold content when the height you save is worth more than the click you charge. Four situations qualify.

1. Frequently asked questions (FAQ) — everyone needs a different entry, and most people read one or two answers. This is where accordions fit best.
2. Order and checkout summaries — shipping address, payment method, and coupons are already decided, so they stay folded and only the one being changed gets opened.
3. Advanced options in settings — most people keep the defaults, so those options stay closed. This use has a name, progressive disclosure: revealing information in stages, only to the people who ask for it.
4. Filters and lists on narrow screens — groups that can't sit side by side on a phone get stacked and folded instead. A filter panel that would take a full sidebar on a desktop collapses into five header rows, and the one someone came to change is a single tap away.

The places to avoid are just as clear. Content meant to be compared across items becomes impossible to compare once folded, so use a table instead. A flow that has to be walked in order belongs in a stepper. And anything that genuinely has to be read doesn't get folded, because folded content mostly goes unread. With only two or three groups, the savings barely exist and the click isn't worth charging, so leaving them expanded is the better call.

"Let's put these six groups in an accordion. Everything is expanded and the save button is off screen."

Shorten the page so the main action comes back into view.

"Should the accordion allow one open section or several?"

Asking whether anyone needs to see two sections at the same time.

"Keep the terms out of the accordion. Folded means nobody reads it."

Content that has to be demonstrably read cannot be hidden behind a click.

Noa reached for this component while redrawing Pagedeck's settings screen. With notifications, sharing, integrations, and advanced options all expanded, the page took four scrolls to reach the end, while the settings most people actually touch were the two at the top. She folded all four groups and started the page with notifications open. After the change the whole screen came down to four title rows and one expanded group, short enough that the notification toggles and the save button finally sat in the same view.

Theo added one condition. Items inside the advanced group get linked directly from help articles, so arriving through one of those links has to open that group expanded. Land on a folded page and the reader can't find the setting the help article just described.

The most common reading is that folding makes a screen cleaner. Put the expanded and folded versions side by side and the folded one does look tidier. But folding removes nothing; it moves content one click away, and content behind a click loses a visible share of its readers. A signup screen that folds away all its explanatory text looks cleaner and starts generating the same question as support tickets.

Treating small screens as automatic grounds for an accordion is a version of the same mistake. Narrow widths do suit vertical folding. The catch is that a phone screen showing six collapsed headers and nothing else gives no hint of what's inside, so people open them one by one and end up doing more work than before the folding. If a title alone doesn't tell the reader what the section holds, revisit the decision to fold at all.