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

• .collapsenyumputkeun 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 dilipat 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 Panduan Praktek Pangarang ARIA - anjeun kedah ngalebetkeun ieu sorangan sareng JavaScript khusus.

Sass

Variabel

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

Kelas

Kelas transisi runtuh tiasa dipendakan dina 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 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:

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

Pilihan

Salaku pilihan bisa diliwatan via atribut data atawa JavaScript, anjeun bisa append hiji ngaran pilihan pikeun data-bs-, sakumaha dina data-bs-animation="{value}". Pastikeun pikeun ngarobah tipe kasus tina ngaran pilihan tina " camelCase " pikeun " kebab-case " nalika ngalirkeun pilihan ngaliwatan atribut data. Contona, make data-bs-custom-class="beautifier"tinimbang data-bs-customClass="beautifier".

Salaku Bootstrap 5.2.0, sadaya komponén ngarojong hiji atribut data ditangtayungan eksperimendata-bs-config nu bisa imah konfigurasi komponén basajan salaku string JSON. Lamun hiji unsur boga data-bs-config='{"delay":0, "title":123}'jeung data-bs-title="456"atribut, nilai final titlebakal 456jeung atribut data misah bakal override nilai dibikeun dina data-bs-config. Salaku tambahan, atribut data anu aya tiasa ngeusian nilai JSON sapertos data-bs-delay='{"show":0,"hide":150}'.

Métode

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

Anjeun tiasa nyiptakeun conto runtuh sareng konstruktor, contona:

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

Kajadian

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

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