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>

Paidda

Ti plugin ti collapse ket mangsuporta pay ti horizontal collapsing. Inayon ti .collapse-horizontalklase ti mangbalbaliw tapno agbaliw ti widthimbes a heightken mangikeddeng ti a widthiti dagus nga elemento ti ubing. Mariknam a nawaya nga agsurat iti bukodmo a kostumbre a Sass, agusar kadagiti estilo ti inline, wenno agusar kadagiti utilidadmi iti kalawa .

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

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. Multiple <button>wenno <a>mabalin nga ipakita ken ilemmeng ti maysa nga elemento no tunggal maysa ket reperensiada daytoy babaen ti hrefor 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 padron ti akordeon ti Giya ti Panagsurat ti Panagsurat ti ARIA - kasapulam nga iraman dagitoy a mismo babaen ti kostumbre a JavaScript.

Sass nga

Dagiti Variable

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .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);

  &.collapse-horizontal {
    width: 0;
    height: auto;
    @include transition($transition-collapse-width);
  }
}

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 pangipakat 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 panid ti akordeon para iti ad-adu pay nga impormasion.

Babaen ti JavaScript

Pagbalinen a manual babaen ti:

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

Dagiti Pagpilian

Kas dagiti pagpilian ket mabalin a maipasa babaen dagiti kababalin ti datos wenno JavaScript, mabalinmo nga inayon ti nagan ti pagpilian iti data-bs-, a kas iti data-bs-animation="{value}". Siguraduen a baliwan ti kita ti kaso ti nagan ti pagpilian manipud iti “ camelCase ” iti “ kebab-case ” no ipasa dagiti pagpilian babaen kadagiti kababalin ti datos. Kas pagarigan, usaren data-bs-custom-class="beautifier"imbes a data-bs-customClass="beautifier".

Manipud iti Bootstrap 5.2.0, amin a paset ket mangsuporta ti eksperimental a naireserba a kababalin ti datos data-bs-configa mabalin a mangbalay ti simple a panagisaad ti paset a kas ti kuerdas ti JSON. No ti maysa nga elemento ket addaan kadagiti data-bs-config='{"delay":0, "title":123}'ken data-bs-title="456"dagiti kababalin, ti maudi a titlepateg ket agbalinto 456ken dagiti naisina a kababalin ti datos ket mangbalbaliw kadagiti pateg a naited iti data-bs-config. Iti pay maipatinayon, dagiti addan a kababalin ti datos ket makabaelda a mangbalay kadagiti pateg ti JSON a kas ti data-bs-delay='{"show":0,"hide":150}'.

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:

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

Dagiti Pasamak

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

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