Fɔdɔm

Aw i de wok

Di kɔlaps JavaSkript plɔgin de yuz fɔ sho ɛn ayd di tin dɛn we de insay. Dɛn kin yuz bɔtin ɔ anka dɛn as trig dɛn we dɛn kin map to sɔm patikyula ɛlimɛnt dɛn we yu kin tɔgl. We yu kɔlap wan ɛlimɛnt, i go animat di heightfrɔm in valyu we i gɛt naw to 0. Given aw CSS de handle animashɔn, yu nɔ go ebul fɔ yuz paddingpan wan .collapseɛlimɛnt. Bifo dat, yuz di klas as indipɛndɛnt wrap ɛlimɛnt.

Ɛgzampul

Klik di bɔtin dɛn we de dɔŋ fɔ sho ɛn ayd ɔda ɛlimɛnt bay we dɛn chenj di klas:

• .collapsede ayd di tin dɛn we de insay
• .collapsingna di tɛm we dɛn de chenj
• .collapse.showsho wetin de insay

Jɛnɛral wan, wi kin advays yu fɔ yuz wan bɔtin we gɛt di data-bs-targetatribyut. Pan ɔl we dɛn nɔ kin advays yu frɔm sɛmantik pɔynt fɔ si, yu kin yuz wan link bak wit di hrefatribyut (ɛn a role="button"). Insay dɛn tu kes ya, data-bs-toggle="collapse"dɛn nid fɔ du di.

<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>

Bifo ɛn biɛn

Di kollaps plɔgin de sɔpɔt bak fɔ ɔrizɔntal kollaps. Ad di .collapse-horizontalmodifya klas fɔ transishɔn di widthinstead ɔf heightɛn sɛt a widthpan di immediate pikin ɛlimɛnt. Fil fri fɔ rayt yu yon kɔstɔm Sass, yuz inlayn stayl dɛn, ɔ yuz wi width yutiliti dɛn .

<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>

Bɔku bɔku target dɛn

A <button>ɔ <a>kin sho ɛn ayd bɔku ɛlimɛnt dɛn bay we i de rɛfrɛns dɛn wit sɛlɛktɔ na in hrefɔ data-bs-targetatribyut. Bɔku <button>ɔ <a>kin sho ɛn ayd wan ɛlimɛnt if dɛn ɔl de rɛfrɛns am wit dɛn hrefɔ data-bs-targetatribyut

<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>

Di we aw pɔsin kin ebul fɔ go de

Mek shɔ se yu ad aria-expandedpan di kɔntrol ɛlimɛnt. Dis atribyut de sho klia wan di stet we di kollapsbul ɛlimɛnt tay to di kɔntrol to skrin rida ɛn di sem kayn ɛp tɛnkɔlɔji dɛn. If di kollapsbul ɛlimɛnt dɔn lɔk bay difɔlt, di atribyut na di kɔntrol ɛlimɛnt fɔ gɛt valyu we na aria-expanded="false". If yu dɔn sɛt di kɔlapsibl ɛlimɛnt fɔ opin bay difɔlt yuz di showklas, sɛt aria-expanded="true"pan di kɔntrol insted. Di plɔgin go ɔtomɛtik tɔgl dis atribyut pan di kɔntrol bay we dɛn dɔn opin ɔ lɔk di ɛlimɛnt we dɛn kin kɔlap ɔ nɔ opin (via JavaSkript, ɔ bikɔs di pɔsin we de yuz am trig ɔda kɔntrol ɛlimɛnt we dɛn tay bak to di sem ɛlimɛnt we dɛn kin kol). If di kɔntrol ɛlimɛnt in HTML ɛlimɛnt nɔto bɔtin (ɛgz., wan <a>ɔ <div>), di atribyutrole="button"fɔ ad to di ɛlimɛnt.

If yu kɔntrol ɛlimɛnt de tɔch wan singl kɔlapsibl ɛlimɛnt – dat na di data-bs-targetatribyut de pɔynt to wan idsɛlɛktɔ – yu fɔ ad di aria-controlsatribyut to di kɔntrol ɛlimɛnt, we gɛt di idɔf di kɔlapsibl ɛlimɛnt. Di mɔdan skrin rida dɛn ɛn di sem kayn ɛp tɛnkɔlɔji dɛn de yuz dis atribyut fɔ gi di wan dɛn we de yuz am ɔda sɔtkat dɛn fɔ go dairekt to di ɛlimɛnt sɛf we dɛn kin kol.

Notis se di implimɛnt we Bootstrap de du naw nɔ de kɔba di difrɛn opshɔnal kibɔd intarakshɔn dɛn we dɛn tɔk bɔt na di ARIA Ɔtorin Praktis Gɛd akɔdin patɛn - yu go nid fɔ put dɛn wan ya yusɛf wit kɔstɔm JavaSkript.

Sass bin de

Di tin dɛn we kin chenj

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

Klas dɛn

Kכlaps transishכn klas dεm kin fכn insay scss/_transitions.scssas dεn de sheb dεn wan ya akraos mכltipכl kכmכpכnt dεm (kכlaps εn akכdiכn).

.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);
  }
}

Aw fɔ yuz am

Di kollaps plɔgin de yuz sɔm klas dɛn fɔ handel di ebi liftin:

• .collapsede ayd di tin dɛn we de insay
• .collapse.showsho di tin dɛn we de insay
• .collapsingdɛn kin ad am we di chenj bigin, ɛn dɛn kin pul am we i dɔn

Yu kin fɛn dɛn klas ya na _transitions.scss.

Via data atribyut dɛn

Jɔs ad data-bs-toggle="collapse"ɛn a data-bs-targetto di ɛlimɛnt fɔ ɔtomɛtik asaynd kɔntrol fɔ wan ɔ mɔ ɛlimɛnt dɛn we kin kol. Di data-bs-targetatribyut de aksept wan CSS sɛlɛktɔ fɔ aplay di kɔlapshɔn to. Mek shɔ se yu ad di klas collapseto di ɛlimɛnt we yu kin kɔlap. If yu want fɔ mek i opin difɔlt, ad di ɔda klas show.

Fɔ ad grup manejmɛnt we tan lɛk akɔdiɔn to wan eria we pɔsin kin kɔlap, ad di data atribyut data-bs-parent="#selector". Rid di akodiɔn pej fɔ no mɔ.

Yu kin yuz JavaSkript fɔ yuz am

Enable manually wit:

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

Di tin dɛn we yu kin pik fɔ du

As opshɔn dɛn kin pas bay data atribyut ɔ JavaSkript, yu kin ad opshɔn nem to data-bs-, lɛk insay data-bs-animation="{value}". Mek shɔ se yu chenj di kes tayp fɔ di opshɔn nem frɔm “ camelCase ” to “ kebab-case ” we yu de pas di opshɔn dɛn tru data atribyut dɛn. Fɔ ɛgzampul, yuz data-bs-custom-class="beautifier"insted fɔ data-bs-customClass="beautifier".

As fɔ Bootstrap 5.2.0, ɔl di kɔmpɔnɛnt dɛn de sɔpɔt wan ɛkspirimɛnt rizɔv data atribyut data-bs-configwe kin os simpul kɔmpɔnɛnt kɔnfigyushɔn as JSON string. We wan ɛlimɛnt gɛt data-bs-config='{"delay":0, "title":123}'ɛn data-bs-title="456"atribyut, di fayn titlevalyu go bi 456ɛn di sɛpret data atribyut dɛn go ɔvalayz valyu dɛn we dɛn gi pan data-bs-config. Apat frɔm dat, di data atribyut dɛn we de naw ebul fɔ gɛt JSON valyu dɛn lɛk data-bs-delay='{"show":0,"hide":150}'.

Di we aw dɛn de du am

Aktiv yu kɔntinyu as wan ɛlimɛnt we pɔsin kin kɔlap. Aksept wan opshɔnal opshɔn dɛn object.

Yu kin mek wan kollaps instans wit di kɔnstrɔkta, fɔ ɛgzampul:

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

Di tin dɛn we kin apin

Bootstrap in kollaps klas de ɛksplɔz sɔm ivintɛns fɔ huk insay kollaps funkshɔnaliti.

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