Exclusive accordions (details name=) + ::details-content

`name` attribute Baseline 2024 (Chrome 120, Safari 17.2, Firefox 130). `::details-content` Baseline 2025 (Chrome 131, Safari 18.4, Firefox 144).

Chrome 131Edge 131Safari 18.4Firefox 144

Grouping `<details>` with the same `name` makes an exclusive accordion natively. `::details-content` targets the collapsible body so you can animate its opening.

What is Baseline?

A signal that a feature works in all major browsers.

Is this free?

Yes, entirely.

CSS

.fx-025 {
  font-family: system-ui;
  max-width: 420px
}
.fx-025 details {
  border-bottom: 1px solid #ddd
}
.fx-025 summary {
  cursor: pointer;
  padding: 12px 0;
  font-weight: 600;
  list-style: none
}
.fx-025 summary::before {
  content: "+";
  display: inline-block;
  width: 1.4em;
  transition: rotate .2s
}
.fx-025 details[open] summary::before {
  rotate: 45deg
}
.fx-025 details::details-content {
  opacity: 0;
  translate: 0 -4px;
  transition: opacity .25s,translate .25s,content-visibility .25s allow-discrete
}
.fx-025 details[open]::details-content {
  opacity: 1;
  translate: 0 0
}
.fx-025 p {
  margin: 0 0 12px
}

HTML

<div class="fx-025">
  <details name="faq" open><summary>What is Baseline?</summary><p>A signal that a feature works in all major browsers.</p></details>
  <details name="faq"><summary>Is this free?</summary><p>Yes, entirely.</p></details>
</div>

Fallback: Without `name`, several panels can be open at once; without `::details-content`, panels open instantly.

Source: developer.mozilla.org/en-US/docs/Web/CSS/::details-content

Prompt

Build accordions with native `<details name="group">` so only one opens at a time, style the toggle in `summary` (hide the marker with `list-style:none`), and animate the body via `details::details-content` with `transition: ... content-visibility .25s allow-discrete`. No JS toggle logic, no ARIA accordion pattern.