Il plugin Collapse è utile per la gestione del meccanismo di apertura e chiusura di elementi espandibili. Il suo utilizzo primario si riscontra in componenti come accordion e menu di navigazione dinamici.
Per realizzare un pannello tipo accordion con il plugin Collapse, si estende il componente CSS Panel raggruppando in un contenitore i pannelli e associando a ciascuno l'interattività per gestire l'apertura e la chiusura.
Si parte da un div con classe .panel-group che deve avere un id (serve per la gestione del plugin):
<div class="panel-group" id="accordion"> ... </div>
All'interno di questo div si inseriscono tanti div con classe .panel quanti sono i pannelli dell'accordion. Ad ogni pannello si associa anche una delle classi per la definizione dei colori (una tra .panel-primary, .panel-success, .panel-warning, .panel-danger o .panel-info):
<div class="panel-group" id="accordion"> <div class="panel panel-primary"> ... </div> <div class="panel panel-primary"> ... </div> <div class="panel panel-primary"> ... </div> </div>
All'interno di ogni div con classe .panel si struttura il contenuto del pannello. La struttura dovrebbe contemplare una sezione con il titolo con classe .panel-heading e una sezione per il corpo o testo con classe .panel-body. Nel contesto del titolo, va inserito un link da cui attivare l'apertura e la chiusura dei pannelli. Questo link deve avere la classe .accordion-toggle, l'attributo data-toggle="collapse", un attributo data-parent valorizzato con l'id del pannello contenitore e l'attributo href valorizzato con l'id del pannello corrispondente.
La parte espandibile del pannello, che coincide con il corpo, deve avere oltre a un id, le classi .panel-collapse e collapse. Al pannello aperto al caricamento della pagina va associata pure la classe .in.
<div class="panel-group" id="accordion"> <div class="panel panel-primary"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#pannello-1">Titolo</a> </h4> </div> <div id="pannello-1" class="panel-collapse collapse in"> <div class="panel-body">Anim pariatur cliche...</div> </div> </div> ... </div>