Collapse
Cambia a visibilità di u cuntenutu in u vostru prughjettu cù uni pochi di classi è i nostri plugins JavaScript.
U plugin JavaScript collapse hè utilizatu per vede è oculte u cuntenutu. I buttoni o l'ancore sò usati cum'è attivatori chì sò mappati à elementi specifichi chì toggle. Collapsed un elementu animarà u heightda u so valore attuale à 0. Data cumu CSS gestisce l'animazioni, ùn pudete micca aduprà paddingnantu à un .collapseelementu. Invece, aduprate a classa cum'è un elementu di imballaggio indipendente.
Cliccate i buttoni sottu per vede è ammuccià un altru elementu via cambiamenti di classi:
.collapseoculta u cuntenutu.collapsinghè appiicata durante a transizione.collapse.showmostra u cuntenutu
Pudete aduprà un ligame cù l' hrefattributu, o un buttone cù l' data-targetattributu. In i dui casi, data-toggle="collapse"hè necessariu.
<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>pò mostrà è ammuccià parechji elementi riferenduli cù un selettore JQuery in u so hrefo data-targetattributu. Multiple <button>o <a>ponu mostrà è ammuccià un elementu se ognunu riferenzi cù u so hrefo data-targetattributu
<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>Utilizendu u cumpunente di a carta , pudete allargà u cumpurtamentu di colapsu predeterminatu per creà un accordione.
<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>Assicuratevi di aghjunghje aria-expandedà l'elementu di cuntrollu. Questu attributu trasmette esplicitamente u statu attuale di l'elementu colapsibile ligatu à u cuntrollu à i lettori di schermu è tecnulugii assistivi simili. Se l'elementu colapsibile hè chjusu per automaticamente, l'attributu nantu à l'elementu di cuntrollu deve avè un valore di aria-expanded="false". Se avete stabilitu l'elementu colapsibile per esse apertu per automaticamente usendu a showclassa, mette aria-expanded="true"nantu à u cuntrollu invece. U plugin cambia automaticamente stu attributu nantu à u cuntrollu basatu annantu à se l'elementu colapsibile hè statu apertu o chjusu (via JavaScript, o perchè l'utilizatore hà attivatu un altru elementu di cuntrollu ancu ligatu à u stessu elementu colapsbile). Se l'elementu HTML di l'elementu di cuntrollu ùn hè micca un buttone (per esempiu, un <a>o <div>), l'attributurole="button"deve esse aghjuntu à l'elementu.
Se u vostru elementu di cuntrollu hè destinatu à un unicu elementu colapsibile - vale à dì l' data-targetattributu punta à un idselettore - duvete aghjunghje l' aria-controlsattributu à l'elementu di cuntrollu, chì cuntene l' idelementu colapsable. I lettori di schermu muderni è tecnulugii d'assistenza simili facenu usu di questu attributu per furnisce l'utilizatori cù accurtatoghji supplementari per navigà direttamente à l'elementu colapsibile stessu.
Innota chì l'implementazione attuale di Bootstrap ùn copre micca e diverse interazzioni di u teclatu descritte in u mudellu di accordione WAI-ARIA Authoring Practices 1.1 - avete bisognu di includà queste stessu cù JavaScript persunalizatu.
U plugin di colapsu utilizeghja uni pochi di classi per trattà a carica pesante:
.collapseoculta u cuntenutu.collapse.showmostra u cuntenutu.collapsinghè aghjuntu quandu a transizione principia, è eliminata quandu finisce
Queste classi ponu esse truvate in _transitions.scss.
Basta aghjunghje data-toggle="collapse"è a data-targetà l'elementu per assignà automaticamente u cuntrollu di unu o più elementi colapsibile. L' data-targetattributu accetta un selettore CSS per applicà u colapsu. Assicuratevi di aghjunghje a classa collapseà l'elementu colapsable. Se vulete chì l'apertura predefinita, aghjunghje a classa supplementaria show.
Per aghjunghje una gestione di gruppu cum'è accordioni à una zona colapsibile, aghjunghje l'attributu di dati data-parent="#selector". Consultate a demo per vede questu in azione.
Abilita manualmente cù:
$('.collapse').collapse()L'opzioni ponu esse passate per attributi di dati o JavaScript. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-, cum'è in data-parent="".
| Nome | Tipu | Default | Descrizzione |
|---|---|---|---|
| parenti | selettore | oggettu jQuery | Elementu DOM | falsu | Se u genitore hè furnitu, allora tutti l'elementi pieghevoli sottu u genitore specificatu seranu chjusi quandu questu articulu pieghevule hè mostratu. (simile à u cumpurtamentu tradiziunale di l'accordioni - questu dipende da a cardclasse). L'attributu deve esse stabilitu nantu à l'area colapsible di destinazione. |
| toggle | booleanu | veru | Commuta l'elementu colapsibile nantu à l'invucazione |
Metudi asincroni è transizioni
Tutti i metudi API sò asincroni è cumincianu una transizione . Ritornanu à u chjamante appena a transizione hè iniziata, ma prima chì finisce . Inoltre, un metudu chjamatu nantu à un cumpunente di transizione serà ignoratu .
Vede a nostra documentazione JavaScript per più infurmazione.
Attiva u vostru cuntenutu cum'è un elementu colapsable. Accetta opzioni opzionali object.
$('#myCollapsible').collapse({
toggle: false
})Cambia un elementu pieghevule per esse mostratu o oculatu. Ritorna à u chjamante prima chì l'elementu colapsibile hè statu veramente mostratu o oculatu (vale à dì prima chì l' avvenimentu shown.bs.collapseo hidden.bs.collapsesi faci).
Mostra un elementu colapsable. Ritorna à u chjamante prima chì l'elementu colapsibile hè statu veramente mostratu (vale à dì prima chì l' shown.bs.collapseavvenimentu si faci).
Oculta un elementu colapsable. Ritorna à u chjamante prima chì l'elementu colapsibile hè statu veramente oculatu (vale à dì prima chì l' hidden.bs.collapseavvenimentu si faci).
Distrughje u colapsu di un elementu.
A classa di colapsu di Bootstrap espone uni pochi di avvenimenti per attaccà à a funziunalità di colapsu.
| Tipu d'avvenimentu | Descrizzione |
|---|---|
| mostra.bs.collapse | Questu avvenimentu spara immediatamente quandu u showmetudu di istanza hè chjamatu. |
| mostratu.bs.collapse | Questu avvenimentu hè sparatu quandu un elementu di colapsu hè statu resu visibile à l'utilizatore (aspetterà chì e transizioni CSS finiscinu). |
| nascondere.bs.collapse | Stu avvenimentu hè sparatu immediatamente quandu u hidemetudu hè statu chjamatu. |
| hidden.bs.collapse | Questu avvenimentu hè sparatu quandu un elementu di colapsu hè statu oculatu da l'utilizatore (aspetterà chì e transizioni CSS finiscinu). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something…
})