Email or username:

Password:

Forgot your password?
Bramus

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.

developer.chrome.com/docs/css-

Exclusive Accordion (aka “named <details>”) is also supported in Safari 17.2 and up.

6 comments
Bramus

And oh, we’re also looking into making it more easy for you to add animations `<details>` … but more on that later ;)

Naman

@bramus I saw some complaints about a11y of this. Any suggestions about that?

Bramus

@nmn Let me double check with engineering before I say anything stupid …

Matt Wilcox

@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.

Dusty Pomerleau

@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:

yatil.social/@yatil/1113347751

Go Up