L’accordion è uno strumento utile per presentare una grande quantità di contenuto nelle pagine occupando poco spazio. Il contenuto, in pratica, viene suddiviso in blocchi che poi vengono mostrati singolarmente attraverso un meccanismo a "fisarmonica" (quando si apre una "voce" si chiude quella che era aperta in precedenza).
Per costruire l’accordion, si usa il plugin collapsible integrato in Bootstrap.
Da un punto di vista strutturale si utilizzano degli elementi di classe panel che servono per costruire i pannelli dell’accordion. Tutti gli elementi panel che costituiscono l’accordion vanno raggruppati in un unico elemento con classe panel-group.
Ogni elemento panel contiene un elemento panel-heading, che costituisce il titolo del pannello, deve contenere un link da utilizzare per attivare l’apertura dell’accordion. Perchè questo collegamento funzioni il suo attributo href deve avere come valore l’ID del panel che si deve aprire. Inoltre il collegamento deve essere dotato dell’attributo data-toggle="collapse" e della classe accordion-toggle.
Di seguito il codice di esempio di un accordion composto da due "blocchi":
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse"
data-parent="#accordion" href="#uno">
Pannello 1
</a>
</h4>
</div>
<div id="uno" class="panel-collapse collapse in">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet... </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse"
data-parent="#accordion" href="#due">
Pannello 2
</a>
</h4>
</div>
<div id="due" class="panel-collapse collapse">
<div class="panel-body">
<p>Curabitur pretium tincidunt lacus... </p>
</div>
</div>
</div>
</div>
Collapsible
Il comportamento collapsible può essere usato anche fuori dal contesto di un accordion. Basta avere un elemento (link, pulsante,… che scatena questo comportamento) e un altro che contiene il contenuto da nascondere o visualizzare. Il primo deve avere l’attributo data-toggle="collapse" e l’attributo data-target il cui valore deve corrispondere all’ID dell’elemento da nascondere/mostrare.
Quest’ultimo deve avere la classe collapse in.
<button type="button" class="btn btn-success" data-toggle="collapse" data-target="#mioCollapsible">
click per attivare il contenuto nascosto
</button>
<div id="mioCollapsible" class="collapse in">
<p>Lorem ipsum dolor sit amet... </p>
</div>Il contenuto collapsible si mostra inizialmente aperto a meno che non venga chiuso via JavaScript al caricamento della pagina.
$(function() {
$('#mioCollapsible').collapse('hide');
});Controllare gli elementi collapsible via JavaScript
Avrete già intuito che gli elementi collapsible sono controllabili via JavaScript. Per farlo sono disponibili tre metodi:
- .collapse(‘toggle’): apre o chiude un elemento collapsible a seconda del suo stato;
- .collapse(‘show’): apre un elemento collapsible;
- .collapse(‘hide’): chiude un elemento collapsible.
Oltre a questi metodi, è possibile far ricorso agli eventi esposti dalla classe collapse:
- show.bs.collapse: L’evento si verifica non appena viene richiamato il metodo show;
- shown.bs.collapse: L’evento si verifica non appena l’elemento collapsible è completamente visibile cioè quando è stata completata la transizione CSS;
- hide.bs.collapse: L’evento si verifica non appena viene richiamato il metodo hide;
- hidden.bs.collapse: L’evento si verifica non appena l’elemento collapsible è completamente nascosto cioè quando è stata completata la transizione CSS.
