Collapse
Elementi richiudibili (in gergo definiti collassabili o collapse), che possono essere attivati indipendentemente l’uno dall’altro oppure in modo esclusivo con l’attivazione di solo un blocco alla volta (in gergo definiti fisarmoniche o accordion).
Come funziona
Per ottenere un gruppo di elementi mutuamente richiudibili (o collapse), è sufficiente aggiungere ad ogni elemento .collapse l’attributo data-parent con il relativo ID del contenitore padre.
<div id="accordionDiv1" class="collapse-div" >
<div class="collapse-header" id="headingA1">
<button data-toggle="collapse" data-target="#accordion1" aria-expanded="true" aria-controls="accordion1">
Group Item #1
</button>
</div>
<div id="accordion1" class="collapse show" aria-labelledby="headingA1" data-parent="#accordionDiv1">
<div class="collapse-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
</div>
</div>
<div class="collapse-header" id="headingA2">
<button data-toggle="collapse" data-target="#accordion2" aria-expanded="false" aria-controls="accordion2">
Group Item #2
</button>
</div>
<div id="accordion2" class="collapse" aria-labelledby="headingA2" data-parent="#accordionDiv1">
<div class="collapse-body">
Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably have not heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>Accessibilità
Assicurati di aggiungere aria-expanded all’elemento di controllo. Questo attributo trasmette esplicitamente lo stato corrente dell’elemento comprimibile legato al controllo a screen reader e tecnologie assistive simili. Se l’elemento comprimibile è chiuso in modo predefinito, l’attributo sull’elemento di controllo dovrebbe avere il valore aria-expanded="false". Se imposti l’elemento comprimibile aperto in modo predefinito utilizzando la classe show, sul controllo invece imposta aria-expanded="true". Il plugin attiva/disattiva automaticamente questo attributo sul controllo in base all’apertura o alla chiusura dell’elemento richiudibile (via JavaScript, o perché l’utente ha attivato un altro elemento di controllo anch’esso legato allo stesso elemento richiudibile). Se il componente HTML dell’elemento di controllo non è un bottone (ad esempio un <a> o <div>), l’attributo role="button" dovrebbe essere aggiunto al componente.
Inoltre, se il tuo elemento di controllo si riferisce a un singolo elemento richiudibile – cioè l’attributo data-target sta puntando a un selettore id – potresti aggiungere un ulteriore attributo aria-controls all’elemento di controllo, contenente l’id dell’elemento richiudibile. I moderni screen reader e tecnologie assistive simili fanno uso di questo attributo per fornire agli utenti scorciatoie aggiuntive per navigare direttamente all’elemento richiudibile stesso.
Al momento Bootstrap non copre la gestione dei comandi attraverso tastiera descritte nelle WAI-ARIA Authoring Practices 1.1 accordion pattern - è quindi necessario includerle separatamente attraverso JavaScript.
Header attivi e hover
Applicando classi aggiuntive al wrapper .collapse-div è possibile utilizzare il colore primario come sfondo degli header.
Aggiungere la classe .collapse-background-active al wrapper per ottenere header con sfondo di colore primario quando questi sono attivi e il contenuto relativo è visibile.
<div id="collapseDiv1-sc1" class="collapse-div collapse-background-active" >
<div class="collapse-header" id="heading1-sc1">
<button data-toggle="collapse" data-target="#collapse1-sc1" aria-expanded="true" aria-controls="collapse1-sc1">
Group Item #1
</button>
</div>
<div id="collapse1-sc1" class="collapse show" aria-labelledby="heading1-sc1">
<div class="collapse-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
</div>
</div>
</div>Aggiungere la classe .collapse-background-hover al wrapper per ottenere header con sfondo di colore primario all’hover.
<div id="collapseDiv1-sc2" class="collapse-div collapse-background-hover" >
<div class="collapse-header" id="heading1-sc2">
<button data-toggle="collapse" data-target="#collapse1-sc2" aria-expanded="true" aria-controls="collapse1-sc2">
Group Item #1
</button>
</div>
<div id="collapse1-sc2" class="collapse show" aria-labelledby="heading1-sc2">
<div class="collapse-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
</div>
</div>
</div>Icona a sinistra
Aggiungendo la classe .collapse-left-icon al wrapper si ottiene una variante in cui l’icona chevron che indica lo stato di apertura è sostituita da segni meno/più allineati a sinistra del titolo dell’header.
<div id="collapseDiv1-lft" class="collapse-div collapse-left-icon" >
<div class="collapse-header" id="heading1-lft">
<button data-toggle="collapse" data-target="#collapse1-lft" aria-expanded="true" aria-controls="collapse1-lft" class="">
Collapsible Group Item #1
</button>
</div>
<div id="collapse1-lft" class="collapse show" aria-labelledby="heading1-lft" style="">
<div class="collapse-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
</div>
</div>
<div class="collapse-header" id="heading2-lft">
<button data-toggle="collapse" data-target="#collapse2-lft" aria-expanded="false" aria-controls="collapse2-lft">
Collapsible Group Item #2
</button>
</div>
<div id="collapse2-lft" class="collapse" aria-labelledby="heading2-lft">
<div class="collapse-body">
Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably have not heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>