They are used to build an interactive element that shows or hides content on demand. The element responsible for this is the <summary>, which must be the first child of <details>. The rest of the content can be of any type.
By default the content appears hidden. If we want to show it initially we can use the open attribute in this way <details open>.
The <details> element can contain headings or any HTML that can be used within a <p> but, by having an implicit ARIA role button as well and removing all the roles assigned to the children, in case of using a heading this will not be discovered by assistive technologies as it is not treated as such.
- Type: block / list-item
- Self-closing: No / No
- Semantic value: Yes / Yes
Definition and example <details> - Definition and example <summary> | Support
Top comments (0)