Show/hide guidelines

Use these guidelines to create show/hide components on your web pages.

Show/hides are collections of content pairs, where each pair consists of a title and content block. They shorten pages and reduce scrolling. But don't make this the primary reason for using this component.

Show/hides allow the reader to decide what information they would like to read, and what to ignore.

If all the information on a page is relevant, organised properly and formatted for ease of scanning, it might be better to display all information at once. Otherwise, you're making the user do more work by clicking on a show/hide.

Example

Select the show/hide menus below to reveal its content.

Your content goes here.

Your content goes here.

Your content goes here.

Where you can use them

How to use them

Do

  • Use clear descriptive headings to assist the user in deciding what content to expand.
  • Use show/hide in situations where it's highly likely the user will only want to click one or two of the show/hide headings.
  • Use a H2 heading before your show/hide group because the titles are H3.
  • If you use any headings within the show/hide, start with H4 to keep the appropriate heading hierarchy.

Don't

  • Don't use show/hide if the user needs to click on most or all of the headings to get their answer or get the full story.
  • Don't use show/hide for important content that your user absolutely needs to know.
  • Don't use show/hides if each item only has a few words of text, or if each item is overly long. The sweet spot is between 50 and 200 words.

Features

  • Multiple items can be opened at any one time
  • Each content pair has a title and a content block
  • The header is clickable with a toggle - click once to expand the accordion, click again to close

Guidelines

  • Titles should be short to medium in length (up to 70 characters).
  • Titles should be descriptive of the content it contains so users can easily scan and decide.
  • Avoid including many links within a content block as they will be difficult to find.
  • Content within each show/hide should be between 50 and 200 words.

Accessibility

Use a H2 heading before your show/hide group because the titles will be H3

  • Use Tab key to enter a group of show/hide items.
  • Tab to move between show/hide titles.
  • Enter to open or close a show/hide item.

How-to guides

Learn how to add a show/hide to your page using our guides:

Return to top of page Back to top