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 informative che possono essere espansi (o compressi) per rivelare (o nascondere) i relativi contenuti.
Per implementare questo pattern sul web, devi combinare alcuni elementi <details> e in genere raggrupparli visivamente per indicare che sono associati.
L'esclusiva fisarmonica
Supporto dei browser
- 120
- 120
- x
- 17,2
Una variante del pattern di accordion è l'accordione esclusiva, in cui può essere aperto un solo widget di divulgazione contemporaneamente.
Per farlo 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ù accordi esclusivi. Ogni volta che utilizzi un nuovo valore name in 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 di pari livello. Possono essere sparsi nel documento. È l'attributo name che li raggruppa, non il loro ordine DOM.
Polyfill dell'esclusiva fisarmonica
Con il seguente codice JavaScript è possibile eseguire il polyfill del comportamento dell'accordion 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 dei browser non attivano questo evento toggle. In questi browser, il codice del polyfill non funziona. In termini di miglioramento progressivo, si tratta di un comportamento accettabile.