Marpuog

No kasano ti panagandar dayta

Ti collapse a plugin ti JavaScript ket maus-usar a mangipakita ken mangilemmeng ti linaon. Dagiti buton wenno angkla ket mausar a kas dagiti trigger a namapa kadagiti espesipiko nga elemento nga i-toggle-mo. Ti panangi-collap ti maysa nga elemento ket mangpabiag ti heightmanipud iti agdama a pategna aginggana iti 0. No maited no kasano a ti CSS ket mangasikaso kadagiti animasion, saanmo a mabalin nga usaren paddingiti maysa .collapsenga elemento. Imbes ketdi, usaren ti klase a kas maysa nga agwaywayas nga elemento ti panagbalkot.

Pagwadan

I-klik dagiti buton iti baba tapno maipakita ken ilemmeng ti sabali nga elemento babaen dagiti panagbalbaliw ti klase:

• .collapseilemmeng ti linaonna
• .collapsingket mayaplikar bayat dagiti panagbalbaliw
• .collapse.showipakitana ti linaonna

Kaaduanna, irekomendarmi ti panagusar ti buton nga addaan iti data-bs-targetattribute. Bayat a saan a mairekomendar manipud iti semantiko a punto de bista, mabalinmo pay nga usaren ti silpo nga addaan iti hrefattribute (ken a role="button"). Iti agpada a kaso, ti data-bs-toggle="collapse"ket kasapulan.

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

Adu a puntiria

Ti maysa <button>wenno <a>mabalinna nga ipakita ken ilemmeng dagiti adu nga elemento babaen ti panangireperensiana kadagitoy babaen ti maysa a mangpili iti hrefwenno data-bs-targetattribute-na. Adu <button>wenno <a>mabalin nga ipakita ken ilemmeng ti maysa nga elemento no tunggal maysa ket reperensiada daytoy babaen ti hrefwenno data-bs-targetattribute -da

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

Ti pannakagun-od

Siguraduen nga inayon aria-expandedti elemento ti panangkontrol. Daytoy a kababalin ket nalawag a mangipakaammo ti agdama a kasasaad ti maibukbok nga elemento a naisilpo iti kontrol kadagiti agbasbasa ti iskrin ken dagiti kapada a makatulong a teknolohia. No ti maibukbok nga elemento ket naserraan babaen ti kasisigud, ti attribute iti elemento ti panagtengngel ket rumbeng nga addaan iti pateg ti aria-expanded="false". No inkeddengmo ti maibukbok nga elemento a malukatan babaen ti default babaen ti panagusar ti showklase, ikeddengmo aria-expanded="true"ketdi ti kontrol. Ti plugin ket automatiko a mangibalbaliw iti daytoy a kababalin iti kontrol a naibatay no ti maibukbok nga elemento ket naluktan wenno naserraan wenno saan (babaen ti JavaScript, wenno gapu ta ti agar-aramat ket nangtignay ti sabali nga elemento ti panagtengngel a naisilpo met iti isu met laeng a maibukbok nga elemento). No ti elemento ti HTML ti elemento ti panangtengngel ket saan a buton (kas pagarigan, maysa <a>wenno <div>), ti attributerole="button"rumbeng a mainayon iti elemento.

No ti elemento ti panagtengngelmo ket mangpuntiria ti maymaysa a maibukbok nga elemento – kayatna a sawen ti data-bs-targetattribute ket mangiturturong iti maysa a idmangpili – rumbeng nga inayonmo ti aria-controlsattribute iti elemento ti kontrol, a naglaon ti idti maibukbok nga elemento. Dagiti moderno a managbasa ti iskrin ken dagiti kapada a makatulong a teknolohia ket agus-usar iti daytoy a kababalin tapno mangipaay kadagiti agar-aramat kadagiti kanayonan a ab-ababa a dalan tapno direkta nga ag-navigate iti maibukbok nga elemento a mismo.

Imutektekanyo a ti agdama a pannakaipatungpal ti Bootstrap ket saan a mangsaklaw kadagiti nadumaduma nga opsional a panagtitinnulong ti teklado a nailadawan iti WAI-ARIA Authoring Practices 1.1 a padron ti akordeon - kasapulam nga iraman dagitoy a mismo babaen ti kostumbre a JavaScript.

Sass nga

Dagiti Variable

$transition-collapse:         height .35s ease;

Dagiti Klase

Dagiti klase ti panagbalbaliw ti panagreggaay ket mabalin a masarakan iti scss/_transitions.scsskas dagitoy ket naibingbingay iti ballasiw dagiti adu a paset (panagtinnag ken akordeon).

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);
}

Panagusar

Ti plugin ti pannakarba ket agus-usar kadagiti sumagmamano a klase tapno mangasikaso ti nadagsen a panagipangato:

• .collapseilemmengna ti linaonna
• .collapse.showipakitana ti linaonna
• .collapsingmainayon no mangrugi ti panagbalbaliw, ken maikkat no malpas

Dagitoy a klase ket mabalin a masarakan iti _transitions.scss.

Babaen kadagiti attribute ti datos

Basta inayon data-bs-toggle="collapse"ken a data-bs-targetiti elemento tapno automatiko a mangituding ti kontrol ti maysa wenno ad-adu pay a mai-collapsible nga elemento. Ti data-bs-targetattribute ket umawat ti maysa a CSS a mangpili a mangyaplikar ti collapse iti. Siguraduen nga inayon ti klase collapseiti collapsible nga elemento. No kayatmo a default a malukatan, inayon ti kanayonan a klase show.

Tapno manginayon ti kasla akordeon a panagituray ti grupo iti maysa a maibukbok a lugar, inayon ti kabileg ti datos data-bs-parent="#selector". Kitaen ti demo tapno makita daytoy nga agtigtignay.

Babaen ti JavaScript

Pagbalinen a manual babaen ti:

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

Dagiti Pagpilian

Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-bs-, a kas iti data-bs-parent="".

Dagiti Pamay-an

Paaktiboenna ti linaonmo kas maysa a collapsible nga elemento. Awaten ti maysa nga opsional a pagpilian object.

Mabalinmo ti mangpartuat ti maysa a pagarigan ti panagreggaay babaen ti konstruktor, kas pagarigan:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})

Dagiti Pasamak

Ti klase ti collapse ti Bootstrap ket mangibutaktak kadagiti sumagmamano a pasamak para iti panag-hook iti panagusar ti collapse.

var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})