Source

Phuhlama

Fetoša go bonagala ga diteng go ralala le porojeke ya gago ka diklase tše mmalwa le di-plugin tša rena tša JavaScript.

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

O ka šomiša kgokagano ye e nago le hrefseka, goba konope ye e nago le data-targetseka. Maemong a mabedi, the data-toggle="collapse"e a nyakega.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
<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">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </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 wa JQuery ka go seka sa yona hrefgoba data-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-targetseka

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
<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">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

Mohlala wa accordion

Ka go šomiša karolo ya karata , o ka katološa boitshwaro bja go phuhlama bja go se fetoge go hlama accordion.

Anim pariatur cliche reprehenderit, enim eiusmod bophelo bo phahameng accusamus terry richardson papatso squid. 3 phiri ngwedi officia aute, bao e seng cupidat skateboard dolor brunch. Tereka ya dijo quinoa nesciunt laborum eiusmod. Brunch 3 phiri ngwedi tempor, sunt aliqua beha nonyana ka eona squid e le 'ngoe-tšimoloho kofi nulla assumenda shoreditch et. Nihil ani keffiyeh helvetica, mošomo wa diatla wa biri wa go šoma ka diatla wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur nama motlatsi lomo. Leggings occaecat craft biri polasi-ho-tafoleng, tala denim aesthetic synth nesciunt mohlomong ha ua utloa ka bona accusamus labore tšoarellang VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Phihlelelo

Kgonthiša gore o tlaleletša aria-expandedgo elemente ya taolo. Seka se se fetišetša ka go lebanya boemo bja bjale bja elemente yeo e phuhlamago yeo e tlemilwego go taolo go babadi ba skrine le theknolotši ya go thuša ye e swanago. Ge e le gore elemente ye e phuhlamago e tswaletšwe ka go ikemela, seka godimo ga elemente ya taolo se swanetše go ba le boleng bja aria-expanded="false". Ge e le gore o beakantše elemente ye e phuhlamago gore e bule ka go ikemela o šomiša showsehlopha, beakanya aria-expanded="true"godimo ga taolo go e na le moo. Plugin e tla fetola seka se ka go iketla taolong go ya ka gore goba aowa elemente ye e phuhlamago e butšwe goba e tswaletšwe (ka JavaScript, goba ka lebaka la gore mosediriši o hlohleleditše elemente ye nngwe ya taolo yeo gape e tlemilwego go elemente ye e swanago ya collapsbile). Ge e le gore elemente ya HTML ya elemente ya taolo ga se konope (mohlala, an <a>goba <div>), sekarole="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-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šeo di hlalošitšwego ka go WAI-ARIA Authoring Practices 1.1 accordion pattern - o tla swanelwa ke go akaretša tše ka bowena ka JavaScript ya tlwaelo.

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-toggle="collapse"le a data-targetgo elemente go abela ka go iketla taolo ya elemente e tee goba tše ntši tše di phuhlamago. Sebopego data-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-parent="#selector". Lebelela demo go bona se se šoma.

Ka JavaScript

Kgontšha ka seatla ka:

$('.collapse').collapse()

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-, bjalo ka go data-parent="".

Leina Mohuta Hlokomologa Tlhalošo
motswadi mokgethi wa | jQuery selo sa | DOM elemente maaka Ge e le gore motswadi o filwe, gona dielemente ka moka tše di phuhlamago ka fase ga motswadi yo a laeditšwego di tla tswalelwa ge selo se se se phuhlamago se bontšhwa. (e tšoanang le boitšoaro ba setso accordion - sena se itšetlehile ka cardsehlopha). Sebopego se swanetše go bewa godimo ga lefelo leo le phuhlamago leo le nepišitšwego.
go fetola boolean ya go swana nnete Toggles elements collapsible ka pitso

Mekgwa ya go šoma

Mekgwa ya asynchronous le diphetogo

Mekgwa ka moka ya API ga e na asynchronous gomme e thoma phetogo . Ba boela go motho yo a leletšago mogala gateetee ge phetogo e thomilwe eupša pele e fela . Go tlaleletša, pitšo ya mokgwa go karolo ya phetogo e tla hlokomologwa .

Bona ditokomane tša rena tša JavaScript bakeng sa tshedimošo e oketšegilego.

.collapse(options)

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

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

.collapse('toggle')

E fetola elemente ye e phuhlamago go bontšhwa goba ye e utilwego. E boela go mogala pele ga ge elemente ye e phuhlamago e tloga e bontšhitšwe goba e utilwe (ke gore pele ga ge tiragalo ya shown.bs.collapsegoba hidden.bs.collapsee direga).

.collapse('show')

E bontšha elemente yeo e ka phuhlamago. E boela go mogala pele ga ge elemente ye e phuhlamago e bontšhitšwe e le ka kgonthe (ke gore pele ga ge shown.bs.collapsetiragalo e direga).

.collapse('hide')

Pata elemente e phuhlamang. E boela go mogala pele ga ge elemente ye e phuhlamago e tloga e utilwe (ke gore pele ga ge hidden.bs.collapsetiragalo e direga).

.collapse('dispose')

E senya go phuhlama ga elemente.

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.

Mohuta wa Tiragalo Tlhalošo
bontšha.bs.go phuhlama Tiragalo ye e thunya ka pela ge showmokgwa wa mohlala o bitšwa.
e bontšhitšwe.bs.e phuhlama Tiragalo ye e thuntšhwa ge elemente ya go phuhlama e dirilwe gore e bonagale go modiriši (e tla emela gore diphetogo tša CSS di phethe).
pata.bs.e phuhlama Tiragalo ye e thuntšhwa ka pela ge hidemokgwa o biditšwe.
e utilwego.bs.e phuhlama Tiragalo ye e thuntšhwa ge elemente ya go phuhlama e utilwe go tšwa go modiriši (e tla emela gore diphetogo tša CSS di phethe). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})