Accordion

The problem it solves

Some pages hold many sections that people need only one or two of: a list of questions and answers, the settings of a product, the details of a plan. Shown in full, the page becomes a long scroll in which the section a person wants is hard to find. An accordion shows only the headings, so the whole set fits on one screen, and lets people open the sections they need.

When to use it

• Content splits into independent sections, and most people need only a few of them.
• The headings alone tell people which section holds their answer, as in a FAQ.
• Space is short, especially on a small screen, and a full page would bury the sections below the fold.

When not to use it

• Do not hide content most people need. If nearly everyone opens every section, show the content and use headings instead.
• Do not use it when people need to compare sections. Two panels cannot be read side by side when opening one closes the other.
• Do not put the only copy of critical information, such as a price condition, inside a collapsed panel.
• Avoid nesting accordions inside accordions. People lose track of where they are.

How to build it

Headings and state

Write each heading as the question or topic it answers, so people can choose without opening it. Show the state with an icon that changes between open and closed, and keep the heading visible above its open panel. Let several panels stay open unless there is a strong reason to allow only one.

Accessibility

• Make each heading a real button inside a heading element, and set aria-expanded to true or false to match its state.
• Point the button at its panel with aria-controls, and keep the panel in the reading order right after its heading.
• Let Enter and Space toggle a panel. Keep focus on the button after it opens.

Search and linking

Content inside a collapsed panel is often missed by find-in-page. Open the matching panel when the page is reached through an anchor link, and consider an "Expand all" control on long lists.