Source

Fɔdɔm

Toggle di visibiliti fɔ kɔntinyu akɔdin to yu prɔjek wit sɔm klas dɛn ɛn wi JavaSkript plɔgin dɛn.

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. Kollaps wan elemɛnt go animate di heightfrɔm in kɔrɛnt valyu 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

Yu kin yuz wan link wit di hrefatribyut, ɔ wan bɔtin wit di data-targetatribyut. Insay dɛn tu kes ya, data-toggle="collapse"dɛn nid fɔ du di.

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

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 wan JQuery sɛlɛktɔ na in hrefɔ data-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-targetatribyut

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

Akkɔdin ɛgzampul

Yuz di kad kɔmpɔnɛnt, yu kin ɛkstɛnd di difɔlt kɔllaps bihayvya fɔ mek wan akodiɔn.

Anim pariatur cliche reprehenderit, enim eiusmod ay layf akusum teri richardson ad squid. 3 wulf mun officia aute, nɔ cupidat sketbɔd dolor brunch. Trak fɔ it quinoa nesciunt laborum eiusmod. Brunch 3 wulf mun tempor, sunt aliqua put wan bɔd pan am squid singl-ɔrijin kɔfi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, kraft bia laboure wes anderson kred nesciunt sapiente ea proident. Ad vegan ekseptɔr butcher vays lomo. Leggings occaecat kraft bia fam-to-tebul, raw denim aesthetic synth nesciunt yu probabli nɔ yɛri bɔt dɛn accusamus labore sataynabul VHS.
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.
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 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>

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 na di kɔntrol bay we dɛn dɔn opin ɔ lɔk di kɔlapsibl ɛlimɛnt ɔ nɔ dɔn opin (via JavaSkript, ɔ bikɔs di yuza trig ɔda kɔntrol ɛlimɛnt we dɛn tay bak to di sem kɔlapsbayl ɛlimɛnt). 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-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 kibɔd intarakshɔn dɛn we dɛn tɔk bɔt na di WAI-ARIA Ɔtorin Praktis 1.1 akodiɔn patɛn - yu go nid fɔ put dɛn wan ya yusɛf wit kɔstɔm JavaSkript.

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-toggle="collapse"ɛn a data-targetto di ɛlimɛnt fɔ ɔtomɛtik asaynd kɔntrol fɔ wan ɔ mɔ ɛlimɛnt dɛn we kin kol. Di data-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-parent="#selector". Rif to di demo fɔ si dis in akshɔn.

Yu kin yuz JavaSkript fɔ yuz am

Enable manually wit:

$('.collapse').collapse()

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

Yu kin pas opshɔn dɛn bay we yu yuz data atribyut ɔ JavaSkript. Fɔ data atribyut dɛn, ad di opshɔn nem to data-, lɛk insay data-parent="".

Nem Kayn Balans Tɔk bɔt
mama ɔ papa sɛlɛktɔ | jKwɛri ɔbjɛkt | DOM elemɛnt lay If dɛn gi mama ɔ papa, den ɔl di ɛlimɛnt dɛn we dɛn kin kɔl ɔnda di mama ɔ papa we dɛn dɔn spɛsifa go lɔk we dɛn sho dis tin we pɔsin kin kɔl. (similar to tradishonal akכdiכn bihayvya - dis de dipכnt pan di cardklas). Di atribyut gɛt fɔ sɛt na di target kɔllapsibl eria.
fɔ chenj di we aw dɛn de boolean we dɛn kɔl tru Toggles di kollapsibl elemɛnt pan invokeshɔn

Di we aw dɛn de du am

Asynchronous mεtכd dεm εn transishכn dεm

Ɔl di API mɛtɔd dɛn na asynchronous ɛn dɛn kin stat wan transishɔn . Dɛn kin go bak to di pɔsin we kɔl am jɔs lɛk aw dɛn bigin fɔ chenj bɔt bifo i dɔn . Apat frɔm dat, dɛn go ignore wan mɛtɔd kɔl pan wan transishɔn kɔmpɔnɛnt .

Si wi JavaSkript dɔkyumentri fɔ no mɔ.

.collapse(options)

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

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Toggles wan kollapsibl elemɛnt fɔ sho ɔ ayd. Ritɔn to di pɔsin we kɔl bifo di kɔlapsibl ɛlimɛnt dɔn rili sho ɔ ayd (dat na bifo di shown.bs.collapseɔ hidden.bs.collapseivin apin).

.collapse('show')

Sho wan ɛlimɛnt we pɔsin kin kɔlap. Ritɔn to di pɔsin we kɔl bifo di kɔlapsibl ɛlimɛnt dɔn rili sho (dat na bifo di shown.bs.collapseivin apin).

.collapse('hide')

I de ayd wan ɛlimɛnt we pɔsin kin kɔlap. Ritɔn to di pɔsin we kɔl bifo di kɔlapsibl ɛlimɛnt dɔn rili ayd (dat na bifo di hidden.bs.collapseivin apin).

.collapse('dispose')

Destroy wan element in kollaps.

Di tin dɛn we kin apin

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

Di kayn tin we apin Tɔk bɔt
sho.bs.kɔlaps Dis ivent de faya wantɛm wantɛm we dɛn kɔl di showinstans mɛtɔd.
sho.bs.kɔlaps Dis ivent de faya we dɛn dɔn mek wan kollaps ɛlimɛnt fɔ si to di yuza (go wet fɔ CSS transishɔn dɛn fɔ dɔn).
ayd.bs.kollaps fɔ di wan dɛn we de Dis ivent de faya wantɛm wantɛm we hidedɛn dɔn kɔl di we aw dɛn de du am.
ayd.bs.kɔlaps Dis ivent de faya we dɛn dɔn ayd wan kollaps ɛlimɛnt frɔm di yuza (go wet fɔ mek CSS transishɔn dɛn dɔn). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})