Chim

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

data-bs-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-bs-toggle="collapse"is required.

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

Khamphei

Collapse plugin hian horizontal collapsing a support bawk. Modifier class chu a aiah .collapse-horizontaltransition 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

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

Target tam tak a awm

A <button>or hian element tam tak chu a or attribute <a>-a selector hmanga reference-in 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-bs-target<button><a>hrefdata-bs-target

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

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

Bootstrap hman mek hian ARIA Authoring Practices Guide accordion pattern -a tarlan optional 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.

Sass a ni

Variables te pawh a awm

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

Class hrang hrang te

scss/_transitions.scssHengte hi component hrang hrang (collapse leh accordion) hrang hranga an insem avangin collapse transition class te hi hmuh theih a ni .

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

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-bs-toggle="collapse"leh a data-bs-targettih mai la, collapsible element pakhat emaw a aia tam emaw control chu automatic in a assign ang. Attribute hian data-bs-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-bs-parent="#selector". Hriat belh duh chuan accordion page ah hian en la .

JavaScript hmangin

Manual hmangin enable theih a ni:

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

Thil thlan theih a ni

Options chu data attribute emaw JavaScript hmanga pass theih a nih avangin option hming chu data-bs-, ah hian i append thei ang data-bs-animation="{value}". Data attribute hmanga options pass dawnin option hming case type chu “ camelCase ” atanga “ kebab-case ” ah thlak ngei ngei tur a ni. Entirnan, data-bs-custom-class="beautifier"tih aiah hmang data-bs-customClass="beautifier"rawh.

Bootstrap 5.2.0 atang khan component zawng zawng hian experimental reserved data attribute an support data-bs-configa, chu chuan JSON string angin component configuration awlsam tak a dah thei a ni. Element pakhatin data-bs-config='{"delay":0, "title":123}'leh data-bs-title="456"attribute a neih chuan a tawp ber titlevalue chu a ni ang a 456, data attribute hrang hrangte chuan , a value pekte chu a override ang data-bs-config. Chu bakah, data attribute awmsa te hian JSON value te chu data-bs-delay='{"show":0,"hide":150}'.

Thiltih dan tur

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

Constructor hmangin collapse instance i siam thei a, entirnan:

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

Thil thlengte

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

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