Rubuh

Kumaha gawéna

Plugin JavaScript runtuh dianggo pikeun nunjukkeun sareng nyumputkeun eusi. Tombol atawa jangkar dipaké salaku pemicu nu dipetakeun ka elemen husus Anjeun toggle. Nurunkeun unsur bakal ngahirupkeun heighttina nilai ayeuna ka 0. Dibikeun kumaha CSS handles animasi, Anjeun teu bisa make paddingdina .collapseunsur. Gantina, make kelas salaku unsur wrapping bebas.

Contona

Pencét tombol di handap pikeun nunjukkeun sareng nyumputkeun unsur sanés ku parobihan kelas:

• .collapsenyumput eusi
• .collapsingditerapkeun dina mangsa transisi
• .collapse.shownembongkeun eusi

Sacara umum, kami nyarankeun ngagunakeun tombol sareng data-bs-targetatribut. Sanaos henteu disarankeun tina sudut pandang semantik, anjeun ogé tiasa nganggo tautan sareng hrefatribut (sareng role="button"). Dina duanana kasus, éta data-bs-toggle="collapse"diperlukeun.

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

Horizontal

Plugin runtuh ogé ngadukung runtuh horisontal. Tambahkeun .collapse-horizontalkelas modifier pikeun transisi widthtinimbang heighttur nyetel hiji widthon unsur anak saharita. Ngarasa Luncat nulis Sass custom anjeun sorangan, make gaya inline, atawa ngagunakeun utilitas lebar kami .

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

Sababaraha udagan

A <button>atanapi <a>tiasa nunjukkeun sareng nyumputkeun sababaraha elemen ku ngarujuk kana pamilih dina atribut hrefatanapi . data-bs-targetSababaraha <button>atanapi <a>tiasa nunjukkeun sareng nyumputkeun unsur upami aranjeunna masing-masing ngarujuk kana atribut hrefatanapi data-bs-targetatributna

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

Aksesibilitas

Pastikeun pikeun nambahkeun aria-expandedkana elemen kontrol. atribut ieu eksplisit conveys kaayaan kiwari unsur collapsible dihijikeun ka kontrol ka pamiarsa layar tur téhnologi pitulung sarupa. Lamun unsur collapsible ditutup sacara standar, atribut dina elemen kontrol kudu boga nilai aria-expanded="false". Upami anjeun parantos nyetél unsur anu tiasa digulung janten kabuka sacara standar nganggo showkelas, setel aria-expanded="true"dina kontrol. Plugin bakal otomatis toggle atribut ieu dina kontrol dumasar kana naha atanapi henteu unsur collapsible geus dibuka atawa ditutup (via JavaScript, atawa kusabab pamaké micu elemen kontrol sejen ogé dihijikeun ka elemen collapsible sarua). Lamun elemen HTML kontrol urang teu tombol (misalna hiji <a>atawa <div>), atributrole="button"kudu ditambahkeun kana unsur.

Lamun unsur kontrol anjeun nargétkeun hiji unsur collapsible tunggal - ie data-bs-targetatribut nujul ka idpamilih - Anjeun kedah nambahkeun aria-controlsatribut ka elemen kontrol, ngandung idunsur collapsible. Pamiarsa layar modéren sareng téknologi pitulung anu sami ngagunakeun atribut ieu pikeun nyayogikeun potong kompas tambahan pikeun pangguna pikeun langsung napigasi ka unsur anu tiasa dilipat.

Catet yén palaksanaan Bootstrap ayeuna henteu nutupan rupa-rupa interaksi keyboard opsional anu dijelaskeun dina pola akordion Praktek Pangarang WAI-ARIA 1.1 - anjeun kedah ngalebetkeun ieu diri anjeun sareng JavaScript khusus.

Sass

Variabel

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

Kelas

Kelas transisi runtuh tiasa dipendakan scss/_transitions.scsssabab ieu dibagi kana sababaraha komponén (runtuh sareng akordion).

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

Pamakéan

Plugin runtuh ngagunakeun sababaraha kelas pikeun nanganan angkat beurat:

• .collapsenyumputkeun eusi
• .collapse.shownembongkeun eusi
• .collapsingditambahkeun nalika transisi dimimitian, sarta dihapus nalika rengse

kelas ieu bisa kapanggih dina _transitions.scss.

Via atribut data

Ngan tambahkeun data-bs-toggle="collapse"na a data-bs-targetkana unsur pikeun otomatis napelkeun kadali hiji atawa leuwih elemen collapsible. Atribut data-bs-targetnampi pamilih CSS pikeun nerapkeun runtuhna. Pastikeun pikeun nambahkeun kelas collapseka elemen collapsible. Upami anjeun hoyong kabuka sacara standar, tambahkeun kelas tambahan show.

Pikeun nambahkeun manajemén grup kawas akordion ka wewengkon collapsible, tambahkeun atribut data data-bs-parent="#selector". Tingal halaman akordion kanggo inpormasi lengkep.

Ngaliwatan JavaScript

Aktipkeun sacara manual nganggo:

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

Pilihan

Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-bs-, sapertos dina data-bs-parent="".

Métode

Aktipkeun eusi anjeun salaku unsur collapsible. Narima hiji pilihan pilihan object.

Anjeun tiasa nyiptakeun conto runtuh sareng konstruktor, contona:

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

Kajadian

Kelas runtuh Bootstrap ngungkabkeun sababaraha acara pikeun ngaitkeun kana fungsionalitas runtuh.

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