Laktawan ti kangrunaan a linaon Laktawan ti docs navigation
in English

Marpuog

I-toggle ti pannakakita ti linaon iti ballasiw ti proyektom babaen ti sumagmamano a klase ken dagiti pluginmi ti JavaScript.

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.

Ti epekto ti animasion daytoy a paset ket agpannuray iti prefers-reduced-motionpanagsaludsod ti media. Kitaen ti benneg ti naikkat a panaggunay ti dokumentasionmi ti pannakagun-od .

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.

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

Pangngaasi a laglagipen a bayat a ti pagarigan iti baba ket addaan iti min-heightset tapno maliklikan ti nalabes a panagpinta manen kadagiti dok-tayo, daytoy ket saan a nalawag a kasapulan. Ti laeng widthon the child element ti kasapulan.

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

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

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

Nagan Tipo Default Panangiladawan
parent agpili ti | jQuery nga banag | DOM nga elemento false No ti nagannak ket naited, kalpasanna amin dagiti maibukbok nga elemento iti baba ti naikeddeng a nagannak ket maiserra no daytoy a maibukbok a banag ket maipakita. (kapada ti tradisional a kababalin ti akordeon - daytoy ket agpannuray iti cardklase). Ti attribute ket masapul a maikeddeng iti target a collapsible a lugar.
toggle boolean nga true I-toggles ti collapsible nga elemento iti inbokasion

Dagiti Pamay-an

Dagiti asynchronous a pamay-an ken panagbalbaliw

Amin a pamay-an ti API ket asynchronous ken mangrugi ti panagbalbaliw . Agsublida iti tumawag apaman a mairugi ti panagbalbaliw ngem sakbay nga agpatingga . Iti pay maipatinayon, ti maysa nga awag ti pamay-an iti maysa a panagbalbaliw a paset ket mailaksidto .

Kitaen ti dokumentasionmi iti JavaScript para iti ad-adu pay nga impormasion .

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
})
Wagas Panangiladawan
toggle I-toggles ti collapsible nga elemento iti maipakita wenno mailemmeng. Agsubli iti tumawag sakbay a ti maibukbok nga elemento ket aktual a naipakita wenno nailemmeng (kayatna a sawen sakbay a mapasamak ti shown.bs.collapsewenno hidden.bs.collapsepasamak).
show Ipakita ti maysa a collapsible nga elemento. Agsubli iti umaw-awag sakbay a ti maibukbok nga elemento ket aktual a naipakita (kas pagarigan, sakbay a shown.bs.collapsemapasamak ti pasamak).
hide Ilemmengna ti maysa a collapsible nga elemento. Agsubli iti umaw-awag sakbay a ti maibukbok nga elemento ket aktual a nailemmeng (kas pagarigan, sakbay a hidden.bs.collapsemapasamak ti pasamak).
dispose Dadaelenna ti pannakarba ti maysa nga elemento. (Ikkaten ti naidulin a datos iti elemento ti DOM)
getInstance Estatiko a pamay-an a mangipalubos kenka a makaala ti collapse instance a nainaig iti maysa nga elemento ti DOM, mabalinmo nga usaren daytoy a kas iti daytoy:bootstrap.Collapse.getInstance(element)
getOrCreateInstance Estatiko a pamay-an a mangisubli ti maysa a pagarigan ti panagreggaay a nainaig iti maysa nga elemento ti DOM wenno mangpartuat ti baro no kas pagarigan saan a nairugi. Mabalinmo nga usaren a kastoy:bootstrap.Collapse.getOrCreateInstance(element)

Dagiti Pasamak

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

Kita ti pasamak Panangiladawan
show.bs.collapse Daytoy a pasamak ket agputok a dagus no ti showpamay-an ti pagarigan ket maawagan.
shown.bs.collapse Daytoy a pasamak ket mapaputok no ti maysa nga elemento ti panagreggaay ket naaramid a makita ti agar-aramat (urayenna dagiti panagbalbaliw ti CSS a malpas).
hide.bs.collapse Daytoy a pasamak ket dagus a mapaputok no ti hidepamay-an ket naawagan.
hidden.bs.collapse Daytoy a pasamak ket mapaputok no ti maysa nga elemento ti panagreggaay ket nailemmeng manipud iti agar-aramat (urayenna dagiti panagbalbaliw ti CSS a malpas).
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})