Make a page easier to scan by letting users reveal more detailed information only if they need it.
When to use this component
Only use the details and summary component if there’s evidence it’s helpful for users to:
- see an overview of multiple, related sections of content
- show and hide those sections as needed
Formatted example
The selectable component you clicked to view this content is an example of the details and summary component.
HTML code
<details>
<summary>The summary title</summary>
More detail that can be revealed by the user.
</details>