Make a complex topic easier to digest by letting users reveal more detailed information only if they need it.
Open this default expander example in new window
Get your medical records
You can see your GP records by:
- asking for them at your GP surgery
- going online to see them (if you have signed up for GP online services)
- HTML code for default expander
- Nunjucks code for default expander
When to use expanders
There are 2 ways to let users reveal more information:
- details
- expander
Use expanders:
- on pages where users find the amount of information overwhelming - they break down information into bite size pieces which the user can "expand", when they're ready to do so
- for information for a wide audience, unlike the details component
- when you see a clear user need for them
Test your content without an expander first. It may be better to:
- simplify and reduce the amount of content
- split the content across multiple pages
- keep the content on a single page, separated by headings
- use a list of links to let users navigate quickly to specific sections of content
When not to use an expander
Do not use an expander:
- if only some of your users will need the information - use details instead
- to give users help in forms - instead, add hint text as a part of other form inputs, such as text inputs, radios and checkboxes or use details
- on pages with other interactive elements, such as buttons or text input - there's a risk that expanders will distract users
- inside other patterns, for example to help users decide when and where to get care (care cards)
How expanders work
The expander is a short link in a box that expands into more detailed text when a user clicks on it.
More than 1 expander
It can work well to have several expanders. See the example below.
Open this group expander example in new window
How to measure your blood glucose levels
Testing your blood at home is quick and easy, although it can be uncomfortable. It does get better.
You would have been given:
- a blood glucose metre
- small needles called lancets
- a plastic pen to hold the lancets
- small test strips
When to check your blood glucose level
Try to check your blood:
- before meals
- 2 to 3 hours after meals
- before, during (take a break) and after exercise
This helps you understand your blood glucose levels and how they’re affected by meals and exercise. It should help you have more stable blood glucose levels.
Write clear link text
Make the link text short and descriptive so users can quickly work out if they need to click on it.
Research
We tested several expanders in our information about type 1 diabetes where users felt overwhelmed by the amount of information. They tested well and seemed to meet users' emotional needs. We've also tested them on other pages about health and medicines.
If you've used this component, get in touch to share your user research findings.
Have you tested this component?
If so, please share your research findings and let us know how it has worked for you. This will help us improve it for everyone.
Before you start, you will need a GitHub account. It's an open forum where we collect feedback.
If you have any questions, you can message us on Slack. You will need a Slack account if you do not have one. Or you can contact us by email.
