Esclusiva Accordion

Crea una scheda a scomparsa esclusiva con più elementi <details> che hanno lo stesso name.

Bramus

La fisarmonica

Un pattern di UI comune sul web è un componente a scomparsa. Si tratta di un componente composto da diversi widget di informativa 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 insieme.

Demo: riquadro accordion con HTML e CSS.

La fisarmonica esclusiva

Supporto dei browser

• 120
• 120
• 130
• 17.2

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

Per creare una sezione a scomparsa esclusiva sul web, aggiungi 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 comportano come un'opzione a scomparsa esclusiva. Quando apri uno degli elementi <details> del gruppo, quello aperto in precedenza si chiude 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>

Demo: accordion esclusiva con HTML e CSS.

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

Demo: più accordion esclusive con HTML e CSS.

Gli elementi <details> che fanno parte di una scheda a scomparsa esclusiva non devono necessariamente essere fratelli. Possono essere sparsi nel documento. È l'attributo name a raggrupparli, non il loro ordine DOM.

Attenzione: prima di utilizzare le accordion esclusive, valuta se sono utili o dannose per gli utenti. Sebbene l'utilizzo di un'organizzazione a scomparsa esclusiva riduca la quantità di spazio visivo occupato dai contenuti, gli utenti potrebbero dover aprire molti elementi per trovare le informazioni. Ciò potrebbe scontentare gli utenti che vogliono guardare più elementi contemporaneamente.

Polyfill della scheda accordion esclusiva

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

Quando viene aperto un elemento <details> con un 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 dei browser non attivano questo evento toggle. In questi browser, il codice polyfill non farà nulla. In termini di miglioramento progressivo, questo è un comportamento accettabile.