Source

Chim

I project pumpui chhunga content hmuh theihna chu class tlemte leh kan JavaScript plugins hmangin toggle rawh.

A hnathawh dan

Collapse JavaScript plugin hi content entir leh thup nan hman a ni. Button emaw anchor emaw hi trigger atan hman a ni a, chu chu element bik i toggle-naah mapped a ni. Element pakhat collapse chuan a heightvalue awm mek atanga 0. CSS hian animation a enkawl dan ngaihtuah chuan element paddingpakhatah i hmang thei lo. .collapseChu ai chuan class chu independent wrapping element atan hmang zawk ang che.

Entirna

A hnuaia button te hi click la, class thlak danglam hmangin element dang i lantir leh thup ang:

  • .collapsecontent a thup thin
  • .collapsingtransition neih laiin hman a ni
  • .collapse.showthupui a lantir

Attribute awmna link i hmang thei a href, attribute awmna button i hmang thei data-targetbawk. Heng pahnihah hian the data-toggle="collapse"is required.

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>

Target tam tak a awm

A <button>or hian a or attribute <a>-a JQuery selector hmanga reference-in element tam tak a lantir thei a, a thup thei bawk. Multiple emaw element pakhat chu an or attribute hmanga an reference vek chuan an lantir thei a, an thup thei bawkhrefdata-target<button><a>hrefdata-target

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>

Accordion entirnan

Card component hmang hian default collapse behavior chu extend la, accordion siam theih a ni.

A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a. terry richardson ad squid. 3 savawm thla officia aute, non cupidatat skateboard dolor brunch hmanga siam a ni. Chaw phur truck quinoa nesciunt laborum eiusmod. Brunch 3 sava thla tempor, sunt aliqua chuan a chungah sava dah squid single-origin coffee nulla assumenda shoreditch et. A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a, a rilru a hah em em bawk a. craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan tih loh chu sa thattu vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt i hre lo mai thei an 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.
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>

A thlen theihna tur

aria-expandedControl element ah hian add ngei ngei tur a ni. He attribute hian control-a inzawm collapsible element dinhmun chu screen reader leh a ang chi assistive technology-ah chiang takin a tarlang a ni. Collapsible element chu default-a khar a nih chuan control element-a attribute chuan value aria-expanded="false". showClass hmangin collapsible element chu default-a open turin i set tawh a nih chuan aria-expanded="true"control-ah set zawk rawh. Plugin hian he attribute hi control-ah hian collapsible element hawn leh khar a nih leh nih loh a zirin a toggle nghal ang (JavaScript hmangin, emaw, user-in control element dang pawh collapsbile element ang chiaha inzawm a trigger avangin). Control element-a HTML element chu button a nih loh chuan (eg, an <a>or <div>), attributerole="button"element-ah hian dah belh tur a ni.

I control element hian collapsible element pakhat a target a nih chuan – chu chu attribute chuan selector data-targeta kawhhmuh a nih chuan – control element-ah attribute chu i dah tur a ni a, chutah chuan of the collapsible element a awm tur a ni. Tunlai screen reader leh a ang chi assistive technology te chuan he attribute hi an hmang a, chu chuan a hmangtute chu collapsible element ngeia direct-a kal theihna tur shortcut dang a pe a ni.idaria-controlsid

Tuna Bootstrap hman mek hian WAI-ARIA Authoring Practices 1.1 accordion pattern- a tarlan keyboard interaction hrang hrangte chu a huam lo tih hre reng ang che - hengte hi nangmah ngeiin custom JavaScript nen i dah tel a ngai ang.

Hman dan tur

Collapse plugin hian heavy lifting handle turin class tlemte a hmang a:

  • .collapsea thupui chu a thup thin
  • .collapse.showa thupui chu a entir a
  • .collapsingtransition a tan hunah a dah belh a, a zawh chuan a paih leh bawk

Heng class te hi _transitions.scss.

Data attribute hmangin a ni

Element ah add data-toggle="collapse"leh a data-targettih mai la, collapsible element pakhat emaw a aia tam emaw control chu automatic in a assign ang. Attribute hian data-targetcollapse apply tur CSS selector a pawm a. collapseCollapsible element ah hian class chu add ngei ngei tur a ni. Default open i duh chuan additional class kha add la show.

Collapsible area-a accordion ang chi group management dah belh tur chuan data attribute data-parent="#selector". Hei hi action-a hmuh theih nan demo en rawh.

JavaScript hmangin

Manual hmangin enable theih a ni:

$('.collapse').collapse()

Thil thlan theih a ni

Options chu data attribute emaw JavaScript hmangin pass theih a ni. Data attribute atan chuan option hming chu , ah hian append la data-, data-parent="".

Hming Lampang Hlawhchhamna Hrilhfiahna
nu leh pa thlangtu | jQuery thil awmzia | DOM element a ni diklo Parent pek a nih chuan he collapsible item hi a lan hunah parent tarlan hnuaia collapsible element zawng zawng chu khar vek a ni ang. card(traditional accordion behavior nen a inang - hei hi class -ah a innghat ). Attribute chu target collapsible area-ah set a ngai a ni.
toggle a ni boolean a ni dik Invocation-ah collapsible element a toggle thin

Thiltih dan tur

Asynchronous method leh inthlak danglamna te

API method zawng zawng hi asynchronous a ni a , transition a tan vek a ni . Transition an tan veleh mahse a tawp hmain call tu hnenah an kir leh thin . Chu bakah, transitioning component-a method call chu ngaihthah a ni ang .

Hriat belh duh chuan kan JavaScript documentation en rawh.

.collapse(options)

I content chu collapsible element angin a activate thin. A pawm a, optional options a awm objectbawk .

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

.collapse('toggle')

Collapsible element chu show emaw hidden emaw ah a toggle thin. Collapsible element chu a takin a lan hma emaw a thup hma emaw (chu chu shown.bs.collapseor hidden.bs.collapseevent a thlen hma) caller hnenah a kir leh thin.

.collapse('show')

Collapsible element a lantir. Collapsible element a lan tak tak hmain (chu chu shown.bs.collapseevent a thlen hmain) caller hnenah a kir leh thin.

.collapse('hide')

Collapsible element a thup thei. Collapsible element chu thup tak tak a nih hmain (chu chu hidden.bs.collapseevent a thlen hmain) caller hnenah a kir leh thin.

.collapse('dispose')

Element pakhat collapse a tichhe thin.

Thil thlengte

Bootstrap-a collapse class hian collapse functionality-a hook theihna tur event tlemte a pholang a.

Thil thleng chi hrang hrang Hrilhfiahna
show.bs.collapse tih hi a ni showHe event hi instance method kan koh chuan a fire nghal vek a ni.
tih a ni.bs.collapse He event hi collapse element pakhat user hmuh theiha siam a nih chuan fired a ni (CSS transition zawh hun a nghak ang).
thup.bs.collapse tih hi a ni hideHe event hi method a koh zawh chuan a fire nghal a ni.
thup.bs.collapse tih a ni He event hi user hnen atanga collapse element thup a nih chuan fire a ni (CSS transition zawh hun a nghak ang). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})