Okuzirika

Engeri gye kikola

Plugin ya JavaScript eya collapse ekozesebwa okulaga n'okukweka ebirimu. Buttons oba anchors zikozesebwa nga triggers eziteekebwa ku maapu ku elements ebitongole by’okyusakyusa. Okugwa elementi kijja kuzza obulamu heightokuva ku muwendo gwayo ogw'akaseera kano okutuuka ku 0. Kubanga CSS gy'ekwatamu ebifaananyi ebirina obulamu, tosobola kukozesa paddingku .collapseelementi. Wabula, kozesa ekibiina nga ekintu ekyetongodde eky’okuzinga.

Eky'okulabirako

Nywa ku buttons wansi okulaga n'okukweka elementi endala ng'oyita mu nkyukakyuka za kiraasi:

• .collapseakweka ebirimu
• .collapsingekozesebwa mu biseera by’enkyukakyuka
• .collapse.showeraga ebirimu

Okutwalira awamu, tusaba okukozesa button eriko data-bs-targetattribute. Wadde nga tekisemba okuva mu ndaba y’amakulu, osobola n’okukozesa enkolagana n’ekintu href(ne a role="button"). Mu mbeera zombi, the data-bs-toggle="collapse"is required.

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

Ebigendererwa ebiwerako

A <button>oba <a>asobola okulaga n’okukweka ebintu ebingi ng’abijuliza n’omusunsula mu kyakyo hrefoba data-bs-targetattribute. Multiple <button>oba <a>basobola okulaga n’okukweka elementi singa buli omu akijuliza n’ekintu kyabwe hrefoba data-bs-targetattribute

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

Okutuuka ku bantu

Kakasa nti oyongera aria-expandedku kintu ekifuga. Attribute eno etuusa mu bulambulukufu embeera eriwo kati ey’ekintu ekiyinza okugwa ekisibiddwa ku control eri abasomi ba screen ne tekinologiya ayamba afaananako bwetyo. Singa ekintu ekiyinza okugwa kiggalwawo nga bwe kibadde, ekintu ku kintu ekifuga kirina okuba n'omuwendo gwa aria-expanded="false". Bw'oba otaddewo ekintu ekiyinza okugwa okubeera ekiggule nga bwe kibadde ng'okozesa showkiraasi, teeka aria-expanded="true"ku kifuga mu kifo ky'ekyo. Plugin ejja kukyusakyusa ekintu kino ku kifuga okusinziira ku oba oba nedda ekintu ekiyinza okugwa kigguddwawo oba kiggaddwa (nga kiyita mu JavaScript, oba kubanga omukozesa yatandikawo ekintu ekirala ekifuga nakyo nga kisibiddwa ku kintu kye kimu ekiyinza okugwa). Singa ekintu kya HTML eky'ekintu ekifuga si bbaatuuni (okugeza, an <a>oba <div>), ekinturole="button"erina okugattibwa ku elementi.

Singa ekintu kyo ekifuga kiba kigenderera ekintu kimu ekiyinza okugwa – kwe kugamba data-bs-targetekintu ekiraga ekintu idekisunsuddwa – olina okwongerako aria-controlsekintu ku kintu ekifuga, ekirimu ideky’ekintu ekiyinza okugwa. Ebisoma ku ssirini eby’omulembe ne tekinologiya ow’enjawulo ayambako bakozesa ekintu kino okuwa abakozesa enkola endala ennyimpi okugenda butereevu ku kintu kyennyini ekiyinza okugwa.

Weetegereze nti enkola ya Bootstrap eriwo kati tekwata ku nkolagana za keyboard ez'enjawulo ez'okwesalirawo ezitegeezeddwa mu WAI-ARIA Authoring Practices 1.1 accordion pattern - ojja kwetaaga okussaamu bino ggwe kennyini ne JavaScript eya bulijjo.

Sass nga bwe kiri

Enkyukakyuka ezikyukakyuka

$transition-collapse:         height .35s ease;

Ebisulo by’abayizi

Ebika by’enkyukakyuka y’okugwa bisobola okusangibwa mu scss/_transitions.scssnga bino bwe bigabanyizibwa mu bitundu ebingi (okugwa ne accordion).

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

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

Enkozesa

Plugin y’okugwa ekozesa kiraasi ntono okukwata okusitula ebizito:

• .collapseakweka ebirimu
• .collapse.showeraga ebirimu
• .collapsingeyongerwako ng’enkyukakyuka etandise, n’eggyibwawo ng’ewedde

Ebisulo bino osobola okubisanga mu _transitions.scss.

Okuyita mu bikwata ku data

Just add data-bs-toggle="collapse"ne a data-bs-targetku element okusobola okugaba automatically control ya element emu oba eziwera ezisobola okugwa. Ekintu data-bs-targetkikkiriza ekisunsula CSS okukozesa okugwa. Kakasa nti ogattako kiraasi collapseku elementi eyinza okugwa. Bw'oba oyagala kiggule nga kisookerwako, yongera ku kiraasi ey'okugattako show.

Okwongera okuddukanya ekibiina ekiringa accordion ku kitundu ekiyinza okugwa, yongera ku data attribute data-bs-parent="#selector". Laba demo olabe kino mu bikolwa.

Okuyita mu JavaScript

Ssobozesa mu ngalo ne:

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

Eby’okulondako

Ebyokulonda bisobola okuyisibwa nga biyita mu data attributes oba JavaScript. Ku bikwata ku data, ssaako erinnya ly'okulonda ku data-bs-, nga mu data-bs-parent="".

Enkola

Ekola ebirimu byo nga ekintu ekiyinza okugwa. Akkiriza eby'okulonda eby'okwesalirawo object.

Osobola okukola ekifaananyi ky'okugwa n'omuzimbi, okugeza:

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

Ebibaddewo

Bootstrap's collapse class eraga ebitonotono ebibaawo olw'oku hooking mu collapse functionality.

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