name attribute for the details element

All major browsers now support the name attribute for the <details> element.

This attribute enables multiple <details> elements to be connected, with only one open at a time. This allows developers to easily create UI features such as accordions without scripting.
The name attribute specifies a group name — give multiple <details> elements the same name value to group them. Only one of the grouped <details> elements can be open at a time — opening one will cause another to close.
<details> elements don’t have to be adjacent to one another in the source to be part of the same group.

Comments