add docs for name attribute of details (mdn#32720)

* add docs for `name` attribute of `details` * apply suggested changes Co-authored-by: Chris Mills <[email protected]> * Codify attribute names --------- Co-authored-by: Chris Mills <[email protected]>
Pjrich1313 · Mar 20, 2024 · 983529c · 983529c
1 parent 8ca15ba
commit 983529c
Showing 1 changed file with 8 additions and 0 deletions.
diff --git 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 `<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. If multiple grouped `<details>` elements are given the `open` attribute, only the first one in the source order will be rendered open.
+
+    > **Note:** `<details>` 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 `<details>` element supports the {{domxref("HTMLDetailsElement/toggle_event", "toggle")}} event, which is dispatched to the `<details>` 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.