Skip to contentWolf-Rayet

Accordion

An accordion shows and hides sections of related content.

When to use

  • Related sections a reader will want some of but not all of, such as a set of settings groups.
  • A long page where the headings alone let a reader find their part.
  • Frequently asked questions, which is the one place an accordion is unarguably right.

When not to use

  • Content most readers need. Hiding it means most will not read it.
  • A short page. Collapsing three paragraphs adds a click and saves nothing.
  • Steps in a sequence. Collapsed steps hide how much is left.
  • One section, which is a heading and a paragraph.

Guidance

Do

When this queue accepts new conversations.

Title each section with what is inside it, and open the one most readers came for.

Don't

Do not title sections generically and leave them all shut. The reader has to open each one to find out what it is.

Content

What to write, and what to leave out.

  • The title says what is inside. Working hours, not Section one or More options.
  • Keep titles parallel, so the set can be scanned as a list.
  • Open the section most readers want, rather than starting with everything closed.