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.

Panel title #3 goes here

Content for panel & goes here.

How-Tos: Accordions

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:

information that breaks into many different sections, for example, a consistent set of sub-topics related to one subject or frequently asked questions
questions and answers in quizzes
terms and defintions (such as a glossary)

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)

Provincial Health Services Authority

Web Editor Hub