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 `<details>` com o mesmo `name` cria um acordeão exclusivo nativamente. `::details-content` mira o corpo recolhível para você animar a abertura.

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: Sem `name`, vários painéis podem ficar abertos ao mesmo tempo; sem `::details-content`, os painéis abrem instantaneamente.

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

Prompt

Construa acordeões com `<details name="group">` nativo para só um abrir por vez, estilize o gatilho em `summary` (esconda o marcador com `list-style:none`), e anime o corpo via `details::details-content` com `transition: ... content-visibility .25s allow-discrete`. Sem lógica de toggle em JS, sem padrão de acordeão ARIA.