Crollo
Attiva o disattiva la visibilità dei contenuti nel tuo progetto con alcune classi e i nostri plugin JavaScript.
Il plug-in JavaScript di compressione viene utilizzato per mostrare e nascondere il contenuto. I pulsanti o gli ancoraggi vengono utilizzati come attivatori che vengono mappati su elementi specifici che si attivano. La compressione di un elemento animerà il heightdal suo valore corrente a 0. Dato il modo in cui CSS gestisce le animazioni, non puoi usarle paddingsu un .collapseelemento. Utilizzare invece la classe come elemento di avvolgimento indipendente.
Fai clic sui pulsanti sottostanti per mostrare e nascondere un altro elemento tramite i cambi di classe:
.collapsenasconde il contenuto.collapsingviene applicato durante le transizioni.collapse.showmostra il contenuto
È possibile utilizzare un collegamento con l' hrefattributo o un pulsante con l' data-targetattributo. In entrambi i casi data-toggle="collapse"è richiesto.
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>A <button>o <a>può mostrare e nascondere più elementi facendo loro riferimento con un selettore JQuery nel suo attributo hrefo . data-targetMultiplo <button>o <a>può mostrare e nascondere un elemento se ciascuno di essi vi fa riferimento con il proprio attributo hrefodata-target
Attiva/disattiva il primo elemento
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
</div>Utilizzando il componente card , puoi estendere il comportamento di compressione predefinito per creare una fisarmonica.
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>Assicurati di aggiungere aria-expandedall'elemento di controllo. Questo attributo trasmette esplicitamente lo stato attuale dell'elemento comprimibile legato al controllo a lettori di schermo e tecnologie assistive simili. Se l'elemento comprimibile è chiuso per impostazione predefinita, l'attributo sull'elemento di controllo dovrebbe avere un valore di aria-expanded="false". Se hai impostato l'elemento comprimibile in modo che sia aperto per impostazione predefinita usando la showclasse, impostalo aria-expanded="true"invece sul controllo. Il plugin attiverà automaticamente questo attributo sul controllo in base al fatto che l'elemento comprimibile sia stato aperto o chiuso o meno (tramite JavaScript, o perché l'utente ha attivato un altro elemento di controllo anch'esso legato allo stesso elemento comprimibile). Se l'elemento HTML dell'elemento di controllo non è un pulsante (ad esempio, an <a>o <div>), l'attributorole="button"deve essere aggiunto all'elemento.
Se il tuo elemento di controllo ha come target un singolo elemento comprimibile, ovvero l' data-targetattributo punta a un idselettore, dovresti aggiungere l' aria-controlsattributo all'elemento di controllo, contenente l' idelemento comprimibile. I moderni lettori di schermo e tecnologie assistive simili utilizzano questo attributo per fornire agli utenti scorciatoie aggiuntive per navigare direttamente all'elemento comprimibile stesso.
Nota che l'attuale implementazione di Bootstrap non copre le varie interazioni con la tastiera descritte nel pattern fisarmonica WAI-ARIA Authoring Practices 1.1 - dovrai includerle tu stesso con JavaScript personalizzato.
Il plugin di compressione utilizza alcune classi per gestire il sollevamento di carichi pesanti:
.collapsenasconde il contenuto.collapse.showmostra il contenuto.collapsingviene aggiunto all'inizio della transizione e rimosso al termine
Queste classi possono essere trovate in _transitions.scss.
Basta aggiungere data-toggle="collapse"e data-targeta all'elemento per assegnare automaticamente il controllo di uno o più elementi comprimibili. L' data-targetattributo accetta un selettore CSS a cui applicare la compressione. Assicurati di aggiungere la classe collapseall'elemento comprimibile. Se desideri che sia aperto di default, aggiungi la classe aggiuntiva show.
Per aggiungere la gestione dei gruppi a fisarmonica a un'area comprimibile, aggiungi l'attributo data data-parent="#selector". Fare riferimento alla demo per vederlo in azione.
Abilita manualmente con:
$('.collapse').collapse()Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-, come in data-parent="".
| Nome | Tipo | Predefinito | Descrizione |
|---|---|---|---|
| genitore | selettore | oggetto jQuery | elemento DOM | falso | Se viene fornito il genitore, tutti gli elementi comprimibili sotto il genitore specificato verranno chiusi quando viene mostrato questo elemento comprimibile. (simile al comportamento della fisarmonica tradizionale - dipende dalla cardclasse). L'attributo deve essere impostato sull'area comprimibile di destinazione. |
| alternare | booleano | VERO | Attiva o disattiva l'elemento comprimibile durante l'invocazione |
Metodi e transizioni asincrone
Tutti i metodi API sono asincroni e avviano una transizione . Ritornano al chiamante non appena la transizione è iniziata ma prima che termini . Inoltre, una chiamata al metodo su un componente in transizione verrà ignorata .
Consulta la nostra documentazione JavaScript per ulteriori informazioni.
Activates your content as a collapsible element. Accepts an optional options object.
$('#myCollapsible').collapse({
toggle: false
})Toggles a collapsible element to shown or hidden. Returns to the caller before the collapsible element has actually been shown or hidden (i.e. before the shown.bs.collapse or hidden.bs.collapse event occurs).
Shows a collapsible element. Returns to the caller before the collapsible element has actually been shown (i.e. before the shown.bs.collapse event occurs).
Hides a collapsible element. Returns to the caller before the collapsible element has actually been hidden (i.e. before the hidden.bs.collapse event occurs).
Destroys an element’s collapse.
Bootstrap’s collapse class exposes a few events for hooking into collapse functionality.
| Event Type | Description |
|---|---|
| show.bs.collapse | Questo evento viene attivato immediatamente quando showviene chiamato il metodo dell'istanza. |
| mostrato.bs.collasso | Questo evento viene attivato quando un elemento di compressione è stato reso visibile all'utente (attenderà il completamento delle transizioni CSS). |
| nascondi.bs.comprimi | Questo evento viene generato immediatamente quando il hidemetodo è stato chiamato. |
| nascosto.bs.collasso | Questo evento viene attivato quando un elemento di compressione è stato nascosto all'utente (attenderà il completamento delle transizioni CSS). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something…
})