From 983529c264f474e6e6680bd9de7bdf32ff52ec96 Mon Sep 17 00:00:00 2001 From: Chad Luo Date: Wed, 20 Mar 2024 23:35:44 +1100 Subject: [PATCH] add docs for `name` attribute of `details` (#32720) * add docs for `name` attribute of `details` * apply suggested changes Co-authored-by: Chris Mills * Codify attribute names --------- Co-authored-by: Chris Mills --- files/en-us/web/html/element/details/index.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/files/en-us/web/html/element/details/index.md b/files/en-us/web/html/element/details/index.md index 170e20ea26dcd91..b765e737c16c21f 100644 --- a/files/en-us/web/html/element/details/index.md +++ b/files/en-us/web/html/element/details/index.md @@ -33,6 +33,14 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attrib > **Note:** You have to remove this attribute entirely to make the details hidden. `open="false"` makes the details visible because this attribute is Boolean. +- `name` + + - : This attribute enables multiple `
` 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 `
` elements the same `name` value to group them. Only one of the grouped `
` elements can be open at a time — opening one will cause another to close. If multiple grouped `
` elements are given the `open` attribute, only the first one in the source order will be rendered open. + + > **Note:** `
` elements don't have to be adjacent to one another in the source to be part of the same group. + ## Events In addition to the usual events supported by HTML elements, the `
` element supports the {{domxref("HTMLDetailsElement/toggle_event", "toggle")}} event, which is dispatched to the `
` element whenever its state changes between open and closed. It is sent _after_ the state is changed, although if the state changes multiple times before the browser can dispatch the event, the events are coalesced so that only one is sent.