Accordions

An accordion is a panel in the body text that can be opened or closed to show or hide content. 

What does an accordion look like?

Panel title #1 goes here in sentence case

 

Content for panel #1 goes here. If you forget to close your accordion before saving it will look like this.

 

 

Content for panel #2 goes here.

 

 

Content for panel & goes here.

 

Why use an accordion?

If you want to hide and show parts of your content, use accordions.

Consider the impact on your page visitor. Does your use of accordions make it easier for the user to scan and quickly get to the content they need? Is the extra click to open the accordion worth the effort for the visitor?

Some examples of content that can work in accordions are:

Best practice

Follow these guidelines to help you use accordions to help, not hinder your webpage visitor.

Content guidelines

  • use short amounts of information, no more than a few paragraphs
  • use headings (H3 or H4) to organize information within the accordions
  • do not use photos, videos, block quotes, buttons or tables inside an accordion
  • do not use an accordion for only one or two sentences of text
  • do not put all your page content into accordions
  • use sentence case in panel titles

Layout or placement guidelines

  • limit panel titles to 45 characters if possible
  • avoid a block of accordions. Group them by subject, if possible and break them up visually with headings
  • do not put an accordion within an accordion
  • do not put an accordion in the sidebar on the right
  • always close accordion before saving your page (otherwise it will stay open when you publish the page)