Collapsing Content into Accordions

Condense content into rows that visitors can click to expand.

Accordions can be a handy tool to condense long pages. When clicked, the accordion header opens or closes to show or hide content.

Typically, multiple accordions are stacked, like this:

Accordions do have drawbacks, though. They require visitors to read a series of headings, then click a heading to view more information. The mental processing and additional steps slightly increase the page’s interaction cost — that is, the effort visitors must exert to reach their goals.

When to use accordions

  • For distinct sections of content from which visitors will pick and choose (e.g. policies, year-by-year curriculum descriptions, program-dependent instructions)
  • To avoid creating child pages that are too deep to appear in the site menu (i.e. sub-sub-sub pages)
  • To collapse supplementary information that could otherwise appear daunting

When not to use accordions

  • If most or all of the content should be accessible at once (e.g. to compare information in different sections)
  • For sections that aren’t very long (that click should be worthwhile!)
  • If visitors will need to read all or most sections on the page
  • On pages that should be printer-friendly

How to add accordions

New to building pages in blocks? Get to know the block editor »

  1. Add an accordions block. By default, the block starts with three individual accordions.
  2. Enter header text. Like other headings, aim to make accordion headers clear, concise and consistent.
  3. Add content to the accordion body. You can insert multiple content blocks. Just avoid blocks that will make the accordion too crowded or busy (billboards, cards, etc.).
  4. Add header and body text to additional accordions.
  5. Remove unused accordions. An empty accordion will appear if you don’t remove it!
  6. Or, add more accordions by clicking the plus icon in the gray bar at the bottom of the accordions block.
  7. To re-order accordions, click on the accordion row you’re moving, then use the block arrows on the left to move it to its new location.

Deleting or moving an entire set of accordions

The accordions block can be tricky to work with since the blocks are nested — the parent accordions block contains multiple inner blocks for each row. If you delete the inner blocks but the parent remains, the empty accordions will keep appearing on the page. The nested blocks tutorial demonstrates how to select different levels of parent and inner blocks so they’re easier to work with.


Accordion examples

In the first example, site visitors will only need to access one of the two accordions, since the content addresses two distinct audiences.

Choosing a mentor

In the second example, the condensed information helps readers quickly recognize the three rotation areas. Opening the accordion provides additional detail, which the reader may not need.

Psychiatry residency program rotations

Beginning in your first year, you will experience the autonomy of running your own team of health-care providers, including nurses, medical students, social workers and pharmacists, in a hospital setting. All first-year rotations listed below are in the inpatient units of Barnes-Jewish Hospital.