Collapse

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. heightCollapsa elementum a currente ad valorem animabit 0. paddingDatum quomodo CSS animationes tractat, in .collapseelemento uti non potes . Sed classe utere ut elementum involuti independenter.

Exemplum

Preme tesserae infra monstrant et celant aliud elementum per mutationes ordinis:

• .collapsecelat content
• .collapsingapplicatur in transitus
• .collapse.showostendit content

In universum commendamus utendo puga cum data-bs-targetattributo. Cum ex semantica sententia non commendatur, nexum cum hrefattributo (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>

Horizontal

Plugin ruinae etiam ruinam horizontalem sustinet. Adde quod .collapse-horizontaldeterminatum genus ad transitum widthpro heightet pone widthin immediato infantis elemento. Libenter sentias scribere propriam consuetudinem Sass, stylis lineis utere, vel amplitudine nostra utere utilitates .

<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </div>
</div>

Multa scuta

A <button>vel <a>multa elementa ostendere et abscondere possunt ea cum electore in suo hrefvel data-bs-targetattributo referendo. Multiplex <button>vel <a>demonstrare et abscondere elementum potest, si unumquemque referat cum suo hrefvel data-bs-targetattributo

<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-expandedelementum 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 showclassium, 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-targetattributum designat idelectoris - attributum debetis elementi temperantiae, elementi collapsibilis aria-controlscontinentis . idLectores 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 currentis exsecutio non tegit varias claviaturarum commercium libitum descriptos in ARIA Authoring Practices dux accordion exemplar - has te includere cum usu JavaScript.

Sass

Variabilium

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

Classes

Classes transeuntium collabi possunt in eo scss/_transitions.scssquod haec per multiplices partes distributa sunt (collapsio et tabs).

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);

  &.collapse-horizontal {
    width: 0;
    height: auto;
    @include transition($transition-collapse-width);
  }
}

Consuetudinem

In ruina plugin paucae classes adhibet ad tractandum elevatio gravis;

• .collapsecelat contentus
• .collapse.showostendit contentus
• .collapsingadditur 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-targetelemento ut statim imperium unius vel plurium elementorum collabentium assignet. Attributum data-bs-targetCSS electrix acceptat ut ruinam adhiberet. Adde genus collapseelementi collapsibili. Si vis aperta defaltam facere, additamentum classis adde show.

Accordion-similes coetus administrationem addere aream collapsibilem, data attributum addere data-bs-parent="#selector". Refer ad paginam tabs pro maiori notitia.

Via JavaScript

Admitte cum manually:

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

Optiones

Cum optiones transeantur per data attributa vel JavaScript, potes appendere nomen optionis data-bs-, ut in data-bs-animation="{value}". Fac mutare casus genus optionis nominis ab " camelCase " ad " kebab-casum " cum transeundo optiones per data attributa. Exempli gratia data-bs-custom-class="beautifier"loco data-bs-customClass="beautifier".

Sicut de Bootstrap 5.2.0, omnia membra experimentalem datam reservatam sustinent data-bs-configquae figuram simplicem componentem sicut chorda JSON domum habere potest. Cum elementum habet data-bs-config='{"delay":0, "title":123}'et data-bs-title="456"attributa, valor finalis titleerit 456et attributa separata data valores supra datos vincent data-bs-config. Praeterea exsistentes notitiae attributae possunt domum JSON valores similes data-bs-delay='{"show":0,"hide":150}'.

Methodi

Contentum actuat tuum ut collapsibile elementum. Acceptat optiones libitum object.

Instantia ruinam cum fabricatore creare potes, exempli gratia:

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

Events

Classis ruina Bootstrap paucas eventus exponit pro hamo in ruina functionis.

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // do something...
})