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.

Benefits:

  • 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.

Considerations:

  • 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.

Examples:

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.