Expandable/collapsable content

Expandable/collapsable content templates

Expandable/collapsable content templates hide content under headings, users can click on an expandable content heading to view the hidden content below.


  • Can be used to break down a topic into different sections.
  • Reduces page scrolling.
  • Allows a user to focus on headings.
  • They can be opened or closed independently of each other.


  • Each expandable title should be descriptive of the content under it.
  • Avoid using expandable content to hide small amounts of content such as a link or a sentence or two.

Usability concerns:

  • Search engines like Google will index the hidden content but when a user gets to the page it may not be obvious where to find that content and using the ‘find’ feature (Ctrl-f) in the browser will not produce any results.
  • Users may not be familiar with the function of opening and closing the sections.
  • Some users may prefer to scroll through content rather than click to open and click to close sections.

When to use expandable content

  • When a page has multiple sections regarding the same topic.
  • For content that users need to view only a certain subset at one time. 
  • When content can be logically broken up into sections.


Policy pages

Policy pages are normally lengthy documents with multiple sections. Having users focus on descriptive headings and choose the content that is relevant to them would make policy pages a perfect candidate for expandable content.

Frequently Asked Questions pages

These pages are the most common place expandable content is used so many users may be familiar with this format. Here questions are turned into headings while answers are hidden away. This makes it easier for users to drill down to the information that they need.

Quick tips

Characters per line

Line lengths should be neither too short (<50 characters per line) nor too long (>100 characters per line) when viewed in a standard browser width window.


All corporate information should be grouped in one distinct area (e.g. "About ____").

Navigation labels should contain the "trigger words" that users will look for to achieve their goal.

There should be no more than 7-9 navigation items per menu/sub menu.

There should be no more than three levels of navigation in the main navigation.

There should be no external links in the main navigation (this includes other University of Waterloo sites that are not the website the user is currently on).

Trust and credibility

The content is up-to-date, authoritative and trustworthy.

It is easy to contact someone for assistance and a reply is received quickly.

The site is free of typographic errors and spelling mistakes.