 Psst, you no longer need JavaScript to create an exclusive accordion! As of Chrome 120 you can give `<details>` elements a `name` value. Just like radio buttons, those with the same name will form a group, of which only one can be chosen at the same time. https://developer.chrome.com/docs/css-ui/exclusive-accordion Exclusive Accordion (aka “named <details>”) is also supported in Safari 17.2 and up. 6 comments
@bramus My source: https://adrianroselli.com/2023/08/progressively-enhanced-html-accordion.html#Update05 It’s entirely possible that it’s a nitpick and not a practical issue.  @bramus There are a11y concerns around this pattern which have not yet been addressed, so I'm not going to be using or encouraging this pattern until that's done. @bramus Exclusive accordions aren't good for the user. It shouldn't be someone else's choice whether you can expand all the content on a page. See this discussion: |
Gregory's Server
And oh, we’re also looking into making it more easy for you to add animations `<details>` … but more on that later ;)