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

`name`-Attribut 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

Mehrere `<details>` mit demselben `name` zu gruppieren ergibt nativ ein exklusives Akkordeon. `::details-content` zielt auf den einklappbaren Inhalt, sodass du sein Öffnen animieren kannst.

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: Ohne `name` können mehrere Panels gleichzeitig offen sein; ohne `::details-content` öffnen Panels sofort.

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

Prompt

Baue Akkordeons mit nativem `<details name="group">`, damit nur eines gleichzeitig offen ist, style den Toggle in `summary` (verstecke den Marker mit `list-style:none`) und animiere den Inhalt über `details::details-content` mit `transition: ... content-visibility .25s allow-discrete`. Keine JS-Toggle-Logik, kein ARIA-Akkordeon-Pattern.