Details block: Exclusive accordions

[Soean]

What problem does this address?

Safari 17.2 now supports the name attribute on the <details> element — which moves some commonly-used functionality from needing JavaScript to being baked into HTML. If you use the name attribute to give a series of details elements the same name, then only one in the series will be open at a time.

<details name="foobar" open>
  <summary>Item 1</summary>
  <p>Since this first item has an open attribute, it’s open by default.</p> 
</details>
<details name="foobar">
   <summary>Item 2</summary>
  <p>When you clicked this item, any other open item will automatically close.</p>
</details>
<details name="foobar">
   <summary>Item 3</summary>
  <p>Now, developers don’t have to write any JavaScript to get this behavior.</p> 
</details>

Any time a user clicks to open a second item, the first item automatically closes. This can make for a better user experience, although do make sure it’s right for your project. Think about users who might want or need to compare one item to another. Consider whether to not it will be annoying to have to tap over and over on each bit of content in order to read each one. This pattern can be frustrating when used inappropriately — even inaccessible.

Here’s an example to compare the difference. Try it in a browser with support.

https://codepen.io/jensimmons/pen/wvNPBZa

Source: https://webkit.org/blog/14787/webkit-features-in-safari-17-2/

What is your proposed solution?

Add a name attribute to the detials block and a text field to edit it.

[thomas-price]

Chrome/Edge v120 and Opera v106 now support this