Okuzirika

Toggle okulabika kw'ebirimu mu pulojekiti yo yonna ne classes ntono ne JavaScript plugins zaffe.

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. Okumenya 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-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-toggle="collapse"is required.

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-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>

Okwegolola

Plugin y’okugwa era ewagira okugwa okw’okwebungulula. Okwongerako ekibiina .widthky'omukyusa okukyusa the mu widthkifo kya heightera oteeke a widthku elementi y'omwana ey'amangu. Wulira nga oli waddembe okuwandiika Sass yo eya custom, kozesa emisono egy'omu layini, oba kozesa ebikozesebwa byaffe eby'obugazi .

<p>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse width" id="collapseWidthExample">
    <div class="card card-body" style="width: 320px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </div>
</div>

Ebigendererwa ebiwerako

A <button>oba <a>asobola okulaga n'okukweka ebintu ebingi nga abijuliza n'omusunsula wa JQuery mu attribute yaayo hrefoba . data-targetMultiple <button>oba <a>basobola okulaga n’okukweka elementi singa buli omu akijuliza n’ekintu kyabwe hrefoba data-targetattribute

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-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>

Ekyokulabirako kya Accordion

Nga okozesa ekitundu kya kaadi , osobola okugaziya enneeyisa y’okugwa eya bulijjo okukola accordion. Okutuuka obulungi ku sitayiro ya accordion, kakasa nti okozesa .accordionng’ekizingirizi.

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the second accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
      </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 yatandika 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-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 kibboodi ez'enjawulo ezitegeezeddwa mu nkola ya ARIA Authoring Practices Guide accordion pattern - ojja kwetaaga okussaamu bino ggwe kennyini ne JavaScript eya bulijjo.

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-toggle="collapse"ne a data-targetku element okusobola okugaba automatically control ya element emu oba eziwera ezisobola okugwa. Ekintu data-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-parent="#selector". Laba demo olabe kino mu bikolwa.

Okuyita mu JavaScript

Ssobozesa mu ngalo ne:

$('.collapse').collapse()

Eby’okulondako

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

Enkola

.collapse(options)

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

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Ekyusa ekintu ekiyinza okugwa okukiragibwa oba okukwekebwa. Edda eri oyo ayita nga ekintu ekiyinza okugwa tekinnalagibwa oba okukwekebwa ddala (kwe kugamba nga shown.bs.collapseoba hidden.bs.collapseekintu tekinnabaawo).

.collapse('show')

Alaga ekintu ekiyinza okugwa. Edda eri oyo ayita nga ekintu ekiyinza okugwa tekinnalagibwa ddala (kwe kugamba nga shown.bs.collapseekintu tekinnabaawo).

.collapse('hide')

Ekweka ekintu ekiyinza okugwa. Edda eri oyo ayita nga ekintu ekiyinza okugwa tekinnakwekebwa ddala (kwe kugamba nga hidden.bs.collapseekintu tekinnabaawo).

.collapse('dispose')

Esaanyaawo okugwa kwa elementi.

Ebibaddewo

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

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})