Details
Make a page easier to scan by letting users reveal more detailed information only if they need it.
When to use this component
Use the details component to make a page easier to scan when it contains information that only some users will need.
When not to use this component
Do not use the details component to hide information that the majority of your users will need.
Details, accordions and tabs
Details, accordions, and tabs all hide sections of content which a user can choose to reveal.
Use the details component instead of tabs or an accordion if you only have 1 section of content.
The details component is less visually prominent than tabs and accordions, so tends to work better for content which is not as important to users.
How it works
The details component is a short link that shows more detailed help text when a user clicks on it.
You can use the above HTML.
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 on this component
There is evidence that some users avoid clicking the link to show more details, as they think it will take them away from the page.
There are concerns that some users of voice assist software will not be able to interact with the component. Some software might require the user to specifically refer to the link to show more details as a button in order to interact with it.
When printing, there is currently no way to force the page to show details hidden inside a details component. This issue has been raised with the W3C.