About this component
The details component is a short link that reveals more text when a user clicks on it.
Users can open and close the component.
The details component is the Design System's implementation of the HTML 'details' element, with a fallback for older browsers that do not support HTML5.
When to use this component
Use this component when there is information on the page that only some users will need.
Hiding content in the details component makes pages shorter and easier to scan.
Do not use the details component to hide content that most of your users will need.
Decide between details, accordions or tabs
Use the details component instead of accordions or tabs if you only have one section of content to hide.
Write clear link text
Write short, descriptive link text for the details component so users understand if they need to click on it.
Research and testing
There are potential usability and accessibility issues with the details component.
Find out about research on the details component on the GOV.UK Design System.
Track when users open and close a details component by tracking the clicks on the link text. Use the original page path, click text, and a data attribute showing the action.
The data attributes are added automatically by the Design System’s ‘tracking’ script.
Feedback, help and support
There is a problem
Thanks for your feedback