Expandable content allows you to show and hide information on a webpage.
This content type can be useful to reduce page length; particularly if content is only relevant to a specific audience.
An example of this can be found on the Open Day website. Expandable boxes have been used on the travel page to allow users to quickly access information relevant to their chosen mode of transport. This saves them from reading information about all of the ways to travel to the University.
The biggest drawback with an expandable box is that it’s an extra click to see information so I’ve summarised our standards for using them in our quick guide to…
Expandable content
You should never hide essential information inside an expandable box as you can’t guarantee that users will click to see the content.
When adding expandable content to a page you should:
- include a descriptive title – you need to encourage the user to expand the box
- keep the title to a maximum of 30 characters
- make sure content within the box is shorter than the main content of the page
- include no more than 100 characters within an expandable box
- make sure the content is written for the web
You should also try to use expandable boxes at the end of a page as they act as a visual break in the content. We found in user testing that people often don’t expect content to follow expandable boxes and so they stop scrolling.
Related posts
For more advice on when to use this content type see my post: Hide or not to Hide: When to use Expandable Content.
