Tonbe

Aktive vizibilite kontni atravè pwojè ou a ak kèk klas ak grefon JavaScript nou yo.

Ki jan li fonksyone

Yo itilize plugin JavaScript efondre pou montre ak kache kontni. Bouton oswa lank yo itilize kòm deklannche ki trase nan eleman espesifik ou aktive. Efondreman yon eleman pral anime a heightsoti nan valè aktyèl li a 0. Bay fason CSS okipe animasyon, ou pa ka itilize paddingsou yon .collapseeleman. Olye de sa, sèvi ak klas la kòm yon eleman anbalaj endepandan.

Efè animasyon eleman sa a depann de prefers-reduced-motionrechèch medya yo. Gade seksyon mouvman redui nan dokiman aksè nou an .

Egzanp

Klike sou bouton ki anba yo pou montre ak kache yon lòt eleman atravè chanjman klas yo:

.collapsekache kontni
.collapsingyo aplike pandan tranzisyon yo
.collapse.showmontre kontni

Ou ka itilize yon lyen ak hrefatribi a, oswa yon bouton ak data-targetatribi a. Nan de ka yo, data-toggle="collapse"li nesesè.

Link ak href

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>

Objektif miltip

Yon <button>oswa <a>ka montre ak kache plizyè eleman lè w refere yo ak yon seleksyon JQuery nan atribi hrefli yo. data-targetPlizyè <button>oswa <a>ka montre ak kache yon eleman si yo chak fè referans li ak atribi yo hrefoswa yodata-target

Aktivite premye eleman

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>

Egzanp akòdeyon

Sèvi ak eleman kat la, ou ka pwolonje konpòtman an efondreman default yo kreye yon akòdeyon. Pou byen reyalize style akòdeyon an, asire w ke ou itilize .accordionkòm yon anbalaj.

Anim pariatur cliche reprehenderit, enim eiusmod high life akize Terry Richardson ak kalma. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Kamyon manje kinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, yo mete yon zwazo sou li kalma sèl-orijin kafe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur bouche vice lomo. Leggings occaecat atizanal byè fèm-a-tab, anvan tout koreksyon abako ayestetik sent nesciunt ou pwobableman pa te tande pale de yo accusamus labore dirab 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">
      <h2 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>
      </h2>
    </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">
      <h2 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>
      </h2>
    </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">
      <h2 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>
      </h2>
    </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>

Aksesiblite

Asire ou ke ou ajoute aria-expandednan eleman kontwòl la. Atribi sa a eksplisitman transmèt eta aktyèl la nan eleman ki rabat la mare nan kontwòl la nan lektè ekran ak teknoloji asistans menm jan an. Si eleman plimyab la fèmen pa default, atribi sou eleman kontwòl la ta dwe gen yon valè aria-expanded="false". Si ou te mete eleman ki rabat la louvri pa default lè l sèvi avèk showklas la, mete aria-expanded="true"sou kontwòl la pito. Plugin a pral otomatikman baskile atribi sa a sou kontwòl la selon si wi ou non eleman ki plizyè a te louvri oswa fèmen (via JavaScript, oswa paske itilizatè a deklanche yon lòt eleman kontwòl tou mare nan menm eleman an pliye). Si eleman HTML eleman kontwòl la se pa yon bouton (egzanp, yon <a>oswa <div>), atribi arole="button"ta dwe ajoute nan eleman an.

Si eleman kontwòl ou a ap vize yon sèl eleman ki plizye - sa vle di data-targetatribi a ap lonje dwèt sou yon idseleksyon - ou ta dwe ajoute aria-controlsatribi a nan eleman kontwòl la, ki gen ladan ideleman ki pliye a. Lektè ekran modèn yo ak teknoloji asistans ki sanble yo sèvi ak atribi sa a pou bay itilizatè yo rakoursi adisyonèl pou navige dirèkteman nan eleman ki rabat nan tèt li.

Remake byen ke aplikasyon Bootstrap aktyèl la pa kouvri divès kalite entèraksyon klavye ki dekri nan modèl akòdeyon WAI-ARIA Authoring Practices 1.1 - w ap bezwen mete sa yo tèt ou ak JavaScript koutim.

Itilizasyon

Plugin efondreman an itilize kèk klas pou okipe leve lou:

.collapsekache kontni an
.collapse.showmontre kontni an
.collapsingyo ajoute lè tranzisyon an kòmanse, epi li retire lè li fini

Ou ka jwenn klas sa yo nan _transitions.scss.

Via atribi done yo

Jis ajoute data-toggle="collapse"ak yon data-targetnan eleman nan otomatikman bay kontwòl youn oswa plis eleman plim. Atribi a data-targetaksepte yon seleksyon CSS pou aplike efondreman an. Asire ou ke ou ajoute klas collapsela nan eleman ki rabat. Si ou ta renmen li louvri defo, ajoute klas adisyonèl la show.

Pou ajoute jesyon gwoup ki sanble ak akòdeyon nan yon zòn ki rabat, ajoute atribi done yo data-parent="#selector". Al gade nan Demo a pou wè sa a an aksyon.

Via JavaScript

Pèmèt manyèlman ak:

$('.collapse').collapse()

Opsyon

Opsyon yo ka pase atravè atribi done oswa JavaScript. Pou atribi done, ajoute non opsyon a nan data-, tankou nan data-parent="".

Non	Kalite	Default	Deskripsyon
paran	seleksyon \| jQuery objè \| Eleman DOM	fo	Si yo bay paran yo, lè sa a tout eleman plimyab ki anba paran espesifye yo pral fèmen lè yo montre atik plimyab sa a. (menm jan ak konpòtman akòdeyon tradisyonèl - sa a depann sou `card`klas la). Gen atribi a dwe mete sou zòn nan sib eklatman.
baskile	booleyen	vre	Aktivite eleman ki rabat sou envokasyon

Metòd

Metòd asynchrone ak tranzisyon

Tout metòd API yo asenkron epi yo kòmanse yon tranzisyon . Yo retounen kote moun k ap rele a le pli vit ke tranzisyon an kòmanse men anvan li fini . Anplis de sa, yo pral inyore yon apèl metòd sou yon eleman tranzisyon .

Gade dokiman JavaScript nou an pou plis enfòmasyon .

`.collapse(options)`

Aktive kontni ou kòm yon eleman plim. Aksepte yon opsyon opsyonèl object.

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

`.collapse('toggle')`

Baskile yon eleman ki rabat pou montre oswa kache. Retounen bay moun k ap rele a anvan yo te montre oswa kache eleman ki rabat (sa vle di anvan evènman shown.bs.collapsean hidden.bs.collapserive).

`.collapse('show')`

Montre yon eleman rabat. Retounen bay moun k ap rele a anvan yo te montre eleman ki rabat la (sa vle di anvan shown.bs.collapseevènman an rive).

`.collapse('hide')`

Kache yon eleman ki rabat. Retounen bay moun k ap rele a anvan yo te kache eleman ki rabat (sa vle di anvan hidden.bs.collapseevènman an rive).

`.collapse('dispose')`

Detwi efondreman yon eleman.

Evènman

Klas efondreman Bootstrap a ekspoze kèk evènman pou branche nan fonksyonalite efondreman.

Kalite Evènman	Deskripsyon
montre.bs.effondreman	Evènman sa a dife imedyatman lè yo `show`rele metòd egzanp lan.
montre.bs.effondreman	Evènman sa a revoke lè yon eleman tonbe vin vizib pou itilizatè a (ap tann tranzisyon CSS yo fini).
kache.bs.effondreman	Evènman sa a te tire imedyatman lè yo `hide`te rele metòd la.
hidden.bs.effondreman	Evènman sa a revoke lè yon eleman tonbe kache nan men itilizatè a (ap tann pou tranzisyon CSS fini).

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})