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

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

Agrupar varios `<details>` con el mismo `name` crea un acordeón exclusivo de forma nativa. `::details-content` apunta al cuerpo plegable para que puedas animar su apertura.

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: Sin `name`, varios paneles pueden estar abiertos a la vez; sin `::details-content`, los paneles se abren al instante.

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

Prompt

Construye acordeones con `<details name="group">` nativo para que solo se abra uno a la vez, estiliza el disparador en `summary` (oculta el marcador con `list-style:none`) y anima el cuerpo con `details::details-content` y `transition: ... content-visibility .25s allow-discrete`. Sin lógica de toggle en JS, sin patrón de acordeón ARIA.