Accordion

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

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

• Add an accordions block. By default, the block starts with three individual accordions.
  (If you don’t need three accordions, you can delete one by clicking on the three dots in the far right corner of the formatting bar and selecting “Remove accordion”.)
• Enter header text. Like other headings, aim to make accordion headers clear, concise and consistent.
• Add content to the accordion body. You can insert multiple content blocks. Just avoid blocks that will make the accordion too crowded or busy (callouts, icons, etc.).
• Use the + icon (Add block) underneath the block you are working on to add more accordions as necessary.
• To re-order accordions, click on the accordion header that you’re moving, then use the block arrows on the left to move it up or down to its new location.

How to link to a specific accordion and have it automatically open for a user

In some cases, you may want to direct users to a specific accordion on a page of FAQs or section where there are many accordions. You can do this, and have that specific accordion automatically open for the user when they click on the link as well.

To do this, you simply add a hash to the page url. The hash you add is based on the order and number of accordions, but the basic formula is to add #accordion-header-XX to the URL.

As with other projects, the accordions are zero based so the first one would be #accordion-header-0