Skip to main content

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?


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 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
  • close the accordion before saving your page (otherwise it will stay open when you publish the page)

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

Copyright © Provincial Health Services Authority. All Rights Reserved.

    Copyright © 2020 Provincial Health Services Authority.