Esclusiva Accordion

Crea un'opzione 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.

La fisarmonica esclusiva

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

Per creare una versione esclusiva della sezione a scomparsa 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>-cs<s">
  summaryWelcome to <Learn CS>S!/<s>u<mm>a<ry
  p…/>p<
/details
details name=&>quo<t;learn>-css"<;
  summ>ary<B>o<x >M<odel/sum>m<ary
  p…/p
/details
deta>ils< name=&>quot;lear<n-css&qu>ot;<
> < s>u<mmarySel>ectors/summary
  p…/p
/details

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.

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.

Polyfill dell'accordion esclusivo

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}][o>pen]`)
        .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.