Details
Expandable container for progressive disclosure
Demo
Click to see details
The deets.
See more examples
API
Tags
Name | Type | Content | |||||||
---|---|---|---|---|---|---|---|---|---|
details |
Native element | <summary> as first child and any other content after that |
|||||||
summary |
Native element | Any, but should be a “summary, caption, or legend for the rest of the contents" |
Attributes
Name | Value | Description | |||||||
---|---|---|---|---|---|---|---|---|---|
open |
Boolean attribute | When present, the details are shown (everything after summary). When removed details are hidden. If you want Details open by default, add this attribute. |
Events
Name | Detail | Description | |||||||
---|---|---|---|---|---|---|---|---|---|
toggle |
None |
Fires after Details was opened or closed. If |
Guidelines
Is the content even necessary?
Although Details and Accordion are great tools for progressive disclosure, you should consider if the hidden content is necessary or if it could just be removed altogether.
Clickable elements inside summary
Some designs will include a button or other interactive element in <summary>
that should not toggle the details. Most elements behave as normal without toggling Details, but some, like in the example below, need an event handler to preventDefault
to stop this from happening:
Show report history
Delete
Export
Navigation
A common application of Details is an expandable navigation. Here's a working example:
Safari flexbox bug
Safari has a bug that prevents summary
from being styled as a flex container. It looks like a fix is coming. If your summary needs flexbox, add a div:
This works
...
Accessibility
The aria-expanded
attribute is managed automatically for you.