Phuhlama

Kamoo e šomago ka gona

Plugin ya JavaScript ya go phuhlama e šomišwa go bontšha le go uta diteng. Dikonope goba ditshetledi di šomišwa bjalo ka dihlohleletši tšeo di beakantšwego go dielemente tše itšego tšeo o di fetošago. Go phušola elemente go tla phediša go heighttšwa go boleng bja yona bja bjale go ya go 0. Ka ge CSS e swara ditshwantšho tša go phela, o ka se šomiše paddinggodimo ga .collapseelemente. Go e na le moo, šomiša sehlopha bjalo ka elemente ya go phuthela ye e ikemetšego.

Mohlala

Klika dikonope tše di lego ka mo tlase go bontšha le go uta elemente ye nngwe ka diphetogo tša sehlopha:

• .collapsee uta diteng
• .collapsinge dirišwa nakong ya diphetogo
• .collapse.showe bontšha diteng

Ka kakaretšo, re kgothaletša go diriša konope yeo e nago le data-bs-targetseka. Le ge e sa kgothaletšwe go tšwa go ntlha ya semantiki, o ka šomiša gape kgokagano le hrefseka (le a role="button"). Maemong a mabedi, the data-bs-toggle="collapse"e a nyakega.

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

Diphetho tše dintši

A <button>goba <a>e ka bontšha le go uta dielemente tše ntši ka go di šupa ka mokgethi ka go seka sa yona hrefgoba data-bs-target. Multiple <button>goba <a>e ka bontšha le go uta elemente ge e le gore yo mongwe le yo mongwe o e šupa ka bona hrefgoba data-bs-targetseka

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

Phihlelelo

Be sure to add aria-expanded to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of aria-expanded="false". If you’ve set the collapsible element to be open by default using the show class, set aria-expanded="true" on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsible element). If the control element’s HTML element is not a button (e.g., an <a> or <div>), the attribute role="button"e swanetše go tlaleletšwa go elemente.

Ge e le gore elemente ya gago ya taolo e nepiša elemente e tee ye e phuhlamago – ke gore data-bs-targetseka se šupa idmokgethi – o swanetše go oketša aria-controlsseka go elemente ya taolo, yeo e nago le idya elemente ye e phuhlamago. Dibadi tša sebjalebjale tša skrine le theknolotši ye e swanago ya go thuša di šomiša seka se go fa badiriši dikgaoletšo tša tlaleletšo tša go sepela thwii go elemente yeo e phuhlamago ka boyona.

Hlokomela gore phethagatšo ya bjale ya Bootstrap ga e akaretše ditirišano tša go fapafapana tša khiiboto tša boikhethelo tšeo di hlalošitšwego ka go mohlala wa accordion wa WAI-ARIA Authoring Practices 1.1 - o tla swanelwa ke go akaretša tše ka bowena ka JavaScript ya tlwaelo.

Sass

Diphetogo

$transition-collapse:         height .35s ease;

Diklase

Diklase tša phetogo ya go phuhlama di ka hwetšwa ka scss/_transitions.scssge tše di abelanwa go ralala le dikarolo tše ntši (go phuhlama le accordion).

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

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

Tšhomišo

Plugin ya go phuhlama e šomiša diklase tše mmalwa go swaragana le go phagamiša boima:

• .collapsee uta diteng
• .collapse.showe bontšha diteng
• .collapsinge tlaleletšwa ge phetogo e thoma, gomme ya tlošwa ge e fedile

Diklase tše di ka hwetšwa go _transitions.scss.

Ka dika ya data

E no tlaleletša data-bs-toggle="collapse"le a data-bs-targetgo elemente go abela ka go iketla taolo ya elemente e tee goba tše ntši tše di phuhlamago. Sebopego data-bs-targetse amogela mokgethi wa CSS go diriša go phuhlama go. Kgonthiša gore o tlaleletša sehlopha collapsego elemente ye e phuhlamago. Ge e ba o rata gore e bulege ka go ikemela, oketša sehlopha sa tlaleletšo show.

Go oketša taolo ya sehlopha ya go swana le accordion go lefelo leo le phuhlamago, oketša seka sa datha data-bs-parent="#selector". Lebelela demo go bona se se šoma.

Ka JavaScript

Kgontšha ka seatla ka:

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

Dikgetho

Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-bs-, bjalo ka go data-bs-parent="".

Mekgwa ya go šoma

E dira gore diteng tša gago di šome bjalo ka elemente ye e phuhlamago. E amogela dikgetho tša boikhethelo object.

O ka hlama mohlala wa go phuhlama ka moagi, mohlala:

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

Ditiragalo

Sehlopha sa go phuhlama sa Bootstrap se pepentšha ditiragalo tše mmalwa tša go goketša ka mošomo wa go phuhlama.

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