Skip to main content


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?

Content for panel #1 goes here.


Content for panel #2 goes here.


Content for panel #3 goes here.


Why use an accordion?

If you want to hide and show parts (such as an answer, more information, details) of your content, use accordions. 

The kinds of content that work best in accordions are:
  • information that breaks into many different sections, for example, frequently asked questions
  • questions and answers in quizzes
  • terms and defintions (such as a glossary).
Best practice

To follow PHSA style for accordions:

  • limit panel titles to 45 characters if possible
  • use sentence case in panel titles
  • 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 put an accordion within an accordion
  • do not put an accordion in the sidebar
  • close the accordion before saving (otherwise it will stay open)

Don’t “hide” important content (such as contact information) in an accordion. The main content of a page should go on the page itself, as close to the top of the page as possible. Accordion panels are for additional information only (not important information).

SOURCE: Accordions ( )
Page printed: . Unofficial document if printed. Please refer to SOURCE for latest information.

Copyright © Provincial Health Services Authority. All Rights Reserved.

    Copyright © 2019 Provincial Health Services Authority.