Collapse
Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
Quomodo facitur
In ruina JavaScript plugin demonstrare et abscondere contentus adhibetur. Bullae vel ancorae adhibentur ut triggers quae provisa sunt ad elementa specifica quae te toggle. height
Collapsa elementum a currente ad valorem animabit 0
. padding
Datum quomodo CSS animationes tractat, in .collapse
elemento uti non potes . Sed classe utere ut elementum involuti independenter.
prefers-reduced-motion
interrogatione instrumentorum. Videre
motum sectionem accessibilitatis nostrae documentationis reductam .
Exemplum
Preme tesserae infra monstrant et celant aliud elementum per mutationes ordinis:
.collapse
celat content.collapsing
applicatur in transitus.collapse.show
ostendit content
In universum commendamus utendo puga cum data-bs-target
attributo. Cum ex semantica sententia non commendatur, nexum cum href
attributo (et a role="button"
) uti potes. Utroque, opus data-bs-toggle="collapse"
est.
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
Multa scuta
A <button>
vel <a>
multa elementa ostendere et abscondere possunt ea cum electore in suo href
vel data-bs-target
attributo referendo. Multiplex <button>
vel <a>
demonstrare et abscondere elementum potest, si unumquemque referat cum suo href
vel data-bs-target
attributo
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-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">
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>
Accessibility
Vide ut aria-expanded
elementum ad imperium addere. Hoc attributum explicite significat praesentem statum collapsibilis elementi ligatum ad potestatem legentium protegendi et similes technologias adiuvandas. Si elementum collapsibile clauditur per defaltam, attributum in elementi potestate valorem habere debet aria-expanded="false"
. Si elementum collapsibile posueris ut pateat per defaltam utens show
classium, aria-expanded="true"
in dicione pones. Plugin sponte toggle hoc attributum in potestate fundatur utrum elementum collapsibile vel non apertum vel clausum (per JavaScript, vel quia utens utitur alia potestate elementi etiam ad idem collapsibile elementum ligatum). Si elementum HTML elementi potestate non est felis (exempli gratia, an <a>
vel <div>
) attributumrole="button"
addatur elemento.
Si elementum imperium tuum unum elementum collapsibile oppugnat - id est data-bs-target
attributum designat id
electoris - attributum debetis elementi temperantiae, elementi collapsibilis aria-controls
continentis . id
Lectores screen moderni et similes technologiae adiuvantes hoc attributo utuntur ut usores cum brevibus additis praebeant ut directe navigant ad elementum ipsum collapsibile.
Nota quod Bootstrap exsecutio vena non operit varias claviaturarum commercium libitum descriptos in WAI-ARIA Authoring Exercitia 1.1 exemplar accordionalem - has te includere cum usu JavaScript.
Sass
Variabilium
$transition-collapse: height .35s ease;
Classes
Classes transeuntium collabi possunt in eo scss/_transitions.scss
quod haec per multiplices partes distributa sunt (collapsio et tabs).
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);
}
Consuetudinem
In ruina plugin paucae classes adhibet ad tractandum elevatio gravis;
.collapse
celat contentus.collapse.show
ostendit contentus.collapsing
additur quando transitus incipit, et quando finitur removetur
Hae classes reperiuntur in _transitions.scss
.
Via data attributa
Adde data-bs-toggle="collapse"
modo et data-bs-target
elemento ut statim imperium unius vel plurium elementorum collabentium assignet. Attributum data-bs-target
CSS electrix acceptat ut ruinam adhiberet. Adde genus collapse
elementi collapsibili. Si vis aperta defaltam facere, additamentum classis adde show
.
Accordion-similes coetus administrationem addere aream collapsibilem, data attributum addere data-bs-parent="#selector"
. Hoc in actione refer ad demo.
Via JavaScript
Admitte cum manually:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
Optiones
Optiones transigi possunt per data attributa vel JavaScript. Data enim attributa, adiungunt optionis nomen data-bs-
, ut in data-bs-parent=""
.
Nomen | Type | Default | Descriptio |
---|---|---|---|
parent |
selector | jQuery object | dom elementum | false |
Si parens provideatur, omnia elementa collapsibilia sub parente praefinito claudentur, cum haec collapsibilis item demonstratur. (similis morum accordion traditio - hoc genus dependet card ). Attributum in area scopo collapsibile apponendum est. |
toggle |
Boolean | true |
Toggles collapsible elementum in invocatione |
Methodi
Modi asynchronous et transitus
Omnes API modi asynchroni sunt et transitus committitur . Redeunt ad RECENS mox ut transitus incipiat sed antequam finiatur . Methodus praeterea in transitus transeuntis ignorabitur .
Contentum actuat tuum ut collapsibile elementum. Acceptat optiones libitum object
.
Instantia ruinam cum fabricatore creare potes, exempli gratia:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
Methodus | Descriptio |
---|---|
toggle |
Toggles collapsibile elementum est ut vel absconditum ostendatur. RECENS, antequam elementum collapsibile redit, actu ostensum est vel absconditum (id est ante eventum shown.bs.collapse vel hidden.bs.collapse eventum). |
show |
Elementum collapsibile ostendit. RECENS, antequam elementum collapsibile redit, actu ostensum est (exempli gratia antequam shown.bs.collapse evenit). |
hide |
Cras lacinia elementum consequat. RECENS, antequam elementum collapsibile redit in actu absconditum (exempli gratia antequam hidden.bs.collapse evenit). |
dispose |
Destruit elementum ruina. (Recondita removet data in dom elementum) |
getInstance |
Methodus stabilis, quae te permittit ut ruinam instantia coniunctam ad elementum domnum attingas, eo uti potes:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
Statica methodus quae ruinam instantia reddit elemento DOM coniunctam vel novam creans in casu initiali non erat. Hoc uti potes:bootstrap.Collapse.getOrCreateInstance(element) |
Events
Classis ruina Bootstrap paucas eventus exponit pro hamo in ruina functionis.
Genus res | Descriptio |
---|---|
show.bs.collapse |
This event fires immediately when the show instance method is called. |
shown.bs.collapse |
This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete). |
hide.bs.collapse |
This event is fired immediately when the hide method has been called. |
hidden.bs.collapse |
This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})