demo · v131

Exclusive accordion with animated ::details-content

The two improvements work together: name="" makes a group of <details> exclusive (only one open at a time), and ::details-content can be animated. Pair them for the canonical FAQ widget pattern.

What changed in Chrome 131?
Two things. ::details-content became its own pseudo so it can be sized, animated, transformed. And the open arrow ::marker is properly styleable.
What's the name attribute?
It groups <details> elements: opening one closes any other in the same group. The browser does it for you — no JavaScript.
Does animation work?
Yes. ::details-content { block-size: 0 → auto } transitions via interpolate-size: allow-keywords and transition-behavior: allow-discrete.
Is it accessible?
Yes — the disclosure widget semantics are unchanged; this is purely visual / grouping behaviour. Screen-reader users still get expanded/collapsed announcements.

the css

details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.3s ease,
              content-visibility 0.3s ease allow-discrete;
}
details[open]::details-content {
  block-size: auto;
}

And on the markup:

<details name="faq">...</details>
<details name="faq">...</details>
<details name="faq">...</details>

see also