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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi est sit amet facilisis magna etiam tempor. Interdum varius sit amet mattis vulputate enim nulla. Et tortor consequat id porta nibh. Nam libero justo laoreet sit. Senectus et netus et malesuada fames ac turpis egestas. Auctor elit sed vulputate mi. Justo nec ultrices dui sapien. Eu feugiat pretium nibh ipsum consequat nisl vel pretium lectus. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Eget est lorem ipsum dolor sit amet consectetur adipiscing. Pulvinar sapien et ligula ullamcorper malesuada proin libero. A erat nam at lectus urna duis convallis. Maecenas volutpat blandit aliquam etiam erat velit scelerisque in. Odio ut enim blandit volutpat maecenas volutpat. Lectus sit amet est placerat. Nullam non nisi est sit amet facilisis magna etiam. Ut placerat orci nulla pellentesque dignissim enim. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi est sit amet facilisis magna etiam tempor. Interdum varius sit amet mattis vulputate enim nulla. Et tortor consequat id porta nibh. Nam libero justo laoreet sit. Senectus et netus et malesuada fames ac turpis egestas. Auctor elit sed vulputate mi. Justo nec ultrices dui sapien. Eu feugiat pretium nibh ipsum consequat nisl vel pretium lectus. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Eget est lorem ipsum dolor sit amet consectetur adipiscing. Pulvinar sapien et ligula ullamcorper malesuada proin libero. A erat nam at lectus urna duis convallis. Maecenas volutpat blandit aliquam etiam erat velit scelerisque in. Odio ut enim blandit volutpat maecenas volutpat. Lectus sit amet est placerat. Nullam non nisi est sit amet facilisis magna etiam. Ut placerat orci nulla pellentesque dignissim enim. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi est sit amet facilisis magna etiam tempor. Interdum varius sit amet mattis vulputate enim nulla. Et tortor consequat id porta nibh. Nam libero justo laoreet sit. Senectus et netus et malesuada fames ac turpis egestas. Auctor elit sed vulputate mi. Justo nec ultrices dui sapien. Eu feugiat pretium nibh ipsum consequat nisl vel pretium lectus. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Eget est lorem ipsum dolor sit amet consectetur adipiscing. Pulvinar sapien et ligula ullamcorper malesuada proin libero. A erat nam at lectus urna duis convallis. Maecenas volutpat blandit aliquam etiam erat velit scelerisque in. Odio ut enim blandit volutpat maecenas volutpat. Lectus sit amet est placerat. Nullam non nisi est sit amet facilisis magna etiam. Ut placerat orci nulla pellentesque dignissim enim. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus.

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