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.

He component hian animation effect hi prefers-reduced-motionmedia query ah a innghat a ni. Kan accessibility documentation a reduced motion tih hi en la .

Entirna

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

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

data-targetA tlangpuiin attribute nei button hman kan rawt a ni. Semantic point of view atanga recommend loh laiin, hrefattribute (leh a role="button") nei link pawh i hmang thei bawk. Heng pahnihah hian the data-toggle="collapse"is required.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<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">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

Khamphei

Collapse plugin hian horizontal collapsing a support bawk. Modifier class chu a aiah .widthtransition turin add la, immediate child element ah a set rawh. Zalen takin mahni custom Sass ziak la, inline style hmang la, kan width utilities hmang rawh .widthheightwidth

Khawngaihin a hnuaia entirnan hian min-heightkan docs-a repaint tam lutuk lo tura set a neih laiin, hei hi chiang taka tih a ngai lo tih hre reng ang che. On the child element chauh a ngai a ni.width

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

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

Accordion entirnan

Card component hmang hian default collapse behavior chu extend la, accordion siam theih a ni. Accordion style dik taka tihhlawhtlin theih nan .accordionwrapper atan hmang ngei ang che.

Accordion panel hmasa ber atan placeholder content thenkhat. He panel hi default-in a lang a, .showclass vang a ni.

Some placeholder content for the second accordion panel. This panel is hidden by default.

And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" 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">
        Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left 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">
        Some placeholder content for the second accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left 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">
        And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
      </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 automatic-in a toggle ang (JavaScript hmangin, emaw, user-in control element dang pawh collapsible 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 ARIA Authoring Practices Guide 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 hmain (chu chu shown.bs.collapseor hidden.bs.collapseevent a thlen hmain) 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 a takin a thup 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 ni.

Thil thleng chi hrang hrang Hrilhfiahna
show.bs.collapse tih 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 koh a nih chuan a fire nghal a ni.
thup.bs.collapse tih a ni He event hi user hnen atanga collapse element thup a nih chuan a fire thin (CSS transition zawh hun a nghak ang).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})