Il supporto per gli elementi HTML details e summary esiste dal 2016, ma solo di recente queste funzionalità hanno iniziato a espandersi e a diventare più mature.

Una novità interessante è la possibilità di modellare questi elementi per creare un exclusive accordion, cioè un gruppo di pannelli in cui solo uno può essere aperto alla volta.
Per arrivare al risultato è sufficientte impostare il medesimo attributo name, che permetterà di collegare più [details] allo stesso gruppo:

<details name="group"><summary>Contenuto 1</summary> ... </details>
<details name="group"><summary>Contenuto 2</summary> ... </details>
<details name="group"><summary>Contenuto 3</summary> ... </details>
<details name="group"><summary>Contenuto 4</summary> ... </details>

A valle di questa implementazione troviamo anche un nuovo psudo-element ::details-content che permetterà di selezionare tutti gli elementi presenti in details, ad eccezione del summary. Dandoci la possibilità di lavorare direttamente sul contenuto dell'elemento, senza però intaccare il suo attivatore.

details {
  --open-size: min(30vw, 300px);
}

/* Animazione di apertura accordion orizzontale */
::details-content {
  transition: width 0.5s ease, content-visibility 0.5s ease allow-discrete;
  width: 0;
}

[open]::details-content {
  width: var(--open-size);
}