Esclusiva Accordion

Crea un'accordion esclusiva con più elementi <details> che hanno lo stesso name.

La fisarmonica

Un pattern UI comune sul web è un componente accordion. Si tratta di un componente costituito da diversi widget di divulgazione che possono essere espansi (o compressi) singolarmente per mostrare (o nascondere) i relativi contenuti.

Per implementare questo pattern sul Web, combini alcuni elementi <details> e in genere li raggruppi visivamente per indicare che appartengono allo stesso tipo.

La fisarmonica esclusiva

Una variante del pattern di accordion è l'accordion esclusiva, in cui è possibile aprire contemporaneamente un solo widget di divulgazione.

Per raggiungere questo obiettivo sul web, ora puoi aggiungere un attributo name agli elementi <details>. Quando viene utilizzato questo attributo, più elementi <details> con lo stesso valore name formano un gruppo semantico e si comporteranno come un accordion esclusivo. Quando apri uno degli elementi <details> del gruppo, quello aperto in precedenza verrà chiuso automaticamente.

<details name="learn-css">
  <summary>Welcome to Learn CSS!</summary>
  <p>…</p>
</details>
<details name="learn-css">
  <summary>Box Model</summary>
  <p>…</p>
</details>
<details name="learn-css">
  <summary>Selectors</summary>
  <p>…</p>
</details>

Una pagina può avere più accordion esclusive. Ogni volta che utilizzi un nuovo valore name su un elemento <details>, viene creato un nuovo gruppo logico.

Tieni presente che gli elementi <details> che fanno parte di un'accordion esclusiva non devono necessariamente essere fratelli. Possono essere sparsi nel documento. È l'attributo name che li raggruppa, non l'ordine DOM.

Usa la fisarmonica esclusiva con il polyfill

Con il seguente codice JavaScript è possibile eseguire il polyfill del comportamento dell'accordon esclusivo. Il codice si basa sull'evento toggle dell'elemento <details>.

Quando si apre un elemento <details> con name, il codice trova gli altri elementi <details> aperti con lo stesso valore per l'attributo name e li chiude.

document.querySelectorAll("details[name]").forEach(($details) => {
  $details.addEventListener("toggle", (e) => {
    const name = $details.getAttribute("name");

    if (e.newState == "open") {
      document
        .querySelectorAll(`details[name=${name}][open]`)
        .forEach(($openDetails) => {
          if (!($openDetails === $details)) {
            $openDetails.removeAttribute("open");
          }
        });
    }
  });
});

Alcune versioni precedenti di browser non attivano questo evento toggle. In questi browser, il codice di polyfill non funziona. In termini di miglioramento progressivo, questo è un comportamento accettabile.