Source

Pa'u

Fa'afeso'ota'i le va'aia o mea i lau galuega fa'atasi ma nai vasega ma a matou JavaScript plugins.

E faapefea ona galue

O lo'o fa'aogaina le fa'apalapala JavaScript e fa'aali ma nana ai mea. O fa'amau po'o taula o lo'o fa'aaogaina e fai ma fa'aoso e fa'afanua i elemene fa'apitoa e te fa'asolo. O le pa'u i lalo o se elemene o le a fa'aola ai le heightmai lona tau i le taimi nei i le 0. Tuuina atu pe faʻafefea ona faʻaogaina e le CSS animation, e le mafai ona e faʻaogaina paddingi luga o se .collapseelemene. Nai lo lena, fa'aaoga le vasega e fai ma mea fa'apipi'i tuto'atasi.

Faataitaiga

Kiliki fa'amau i lalo e fa'aali ma nana se isi elemene e ala i suiga o vasega:

  • .collapsenana mea
  • .collapsinge fa'aaogaina i taimi o suiga
  • .collapse.showfa'aalia anotusi

E mafai ona e faʻaogaina se fesoʻotaʻiga ma le hrefuiga, poʻo se faʻamau ma le data-targetuiga. I tulaga uma e lua, data-toggle="collapse"e manaʻomia.

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>

Tauliaga e tele

A <button>poʻo <a>e mafai ona faʻaalia ma nana elemene e tele e ala i le faʻasinoina i latou i se JQuery filifilia i lona hrefuiga data-target. Fa'atele <button>pe mafai ona fa'aali ma nana se elemene pe a ta'ua ta'itasi ma o <a>latou uigahrefdata-target

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>

Fa'ata'ita'iga akordion

I le fa'aaogaina o le vaega o le kata , e mafai ona e fa'alautele le amio fa'aletonu e fai ai se akordion.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 luko masina officia aute, e le o cupidatat skateboard dolor brunch. loli meaai quinoa nesciunt laborum eiusmod. Brunch 3 luko moon tempor, sunt aliqua tuu se manulele i luga o le kofe tasi le amataga 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 masalo e te le'i fa'alogo iai 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.
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>

Avanoa

Ia mautinoa e faaopoopo aria-expandedi le elemene pulea. O lenei uiga o lo'o fa'ailoa manino mai ai le tulaga o lo'o i ai nei o le elemene e mafai ona pa'u o lo'o nonoa i le fa'atonuga e fa'ata'ita'i ai le au faitau ma isi tekonolosi fesoasoani tutusa. Afai o le elemene e mafai ona pa'u ua tapunia ona o le faaletonu, o le uiga o le elemene pulea e tatau ona i ai se tau o le aria-expanded="false". Afai ua e setiina le elemene e mafai ona pa'u ina ia tatala e ala ile fa'aogaina ole showvasega, fa'ae'e aria-expanded="true"ile pule. O le plugin o le a otometi lava ona fesuiaʻi lenei uiga i luga o le pule e faʻatatau pe ua tatalaina pe tapunia le elemene collapsible pe leai (e ala i le JavaScript, pe ona o le tagata faʻaoga na faʻaosoina se isi elemene faʻatonutonu e saisai foi i le elemene collapsbile tutusa). Afai o le elemene HTML e pulea e le o se faamau (fa'ata'ita'iga, <a>po'o le <div>), o le uigarole="button"e tatau ona faaopoopo i le elemene.

Afai o lau elemene fa'atonutonu o lo'o tulimata'ia se elemene e tasi e mafai ona pa'u - e pei o le data-targetuiga o lo'o fa'asino i se idtagata filifilia - e tatau ona e fa'aopoopoina le aria-controlsuiga i le elemene fa'atonutonu, o lo'o iai le idelemene e mafai ona pa'u. E fa'aogaina e le aufaitau mata fa'aonaponei ma fa'atekonolosi feso'ota'i tutusa lenei uiga e tu'uina atu ai i tagata fa'aoga ni ala pupuu fa'aopoopo e fa'afeiloa'i sa'o i le elemene e mafai ona pa'u.

Manatua o le faʻatinoga o Bootstrap o loʻo iai nei e le o aofia ai fesoʻotaʻiga keyboard eseese o loʻo faʻamatalaina i le WAI-ARIA Authoring Practices 1.1 accordion pattern - e tatau ona e faʻapipiʻiina oe lava i le JavaScript masani.

Fa'aoga

O le pa'u fa'apipi'i fa'aoga ni nai vasega e fa'atautaia ai le si'i mamafa:

  • .collapsenana le anotusi
  • .collapse.showfa'aalia le anotusi
  • .collapsinge faaopoopo pe a amata le suiga, ma aveese pe a uma

O nei vasega e mafai ona maua i _transitions.scss.

E ala i fa'amaumauga uiga

Na'o le fa'aopoopo data-toggle="collapse"ma le a data-targeti le elemene e otometi lava ona tu'uina atu le pulea o se tasi po'o le sili atu elemene e mafai ona pa'u. O le data-targetuiga e talia se CSS filifilia e fa'aoga le pa'u i. Ia mautinoa e faaopoopo le vasega collapsei le elemene e mafai ona pa'u. Afai e te mana'o e le'i tatalaina, fa'aopoopo le vasega fa'aopoopo show.

Ina ia fa'aopoopo le pulega vaega e pei o le akordion i se vaega e mafai ona pa'u, fa'aopoopo le uiga fa'amaumauga data-parent="#selector". Va'ai i le demo e va'ai ai i lenei gaioiga.

E ala i le JavaScript

Fa'aaga ma le lima ile:

$('.collapse').collapse()

Filifiliga

O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-, pei o le data-parent="".

Igoa Ituaiga Fa'atonu Fa'amatalaga
matua tagata filifilia | jQuery mea | DOM elemene pepelo Afai e tu'uina mai matua, ona tapunia uma lea o elemene e mafai ona pa'u i lalo o le matua fa'apitoa pe a fa'aalia le mea lea e mafai ona pa'u. (e tutusa ma amioga fa'ale-aganu'u - e fa'alagolago i le cardvasega). O le uiga e tatau ona seti i luga o le vaega e mafai ona pa'u.
fesuia'i boolean moni Fa'asolo le elemene e mafai ona pa'u i luga ole valaau

Metotia

Metotia ma suiga e le tutusa

O metotia API uma e le fetaui ma amata se suiga . Latou te toe fo'i atu i le tagata telefoni i le taimi lava e amata ai le suiga ae le'i uma . E le gata i lea, o le a le amana'ia se auala e vala'au ai i se vaega o suiga .

Va'ai la matou pepa JavaScript mo nisi fa'amatalaga.

.collapse(options)

Fa'agaoioia lau anotusi o se mea e mafai ona pa'u. Talia se filifiliga faitalia object.

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

.collapse('toggle')

Su'e se elemene e mafai ona pa'u e fa'aali pe natia. Toe fo'i i le tagata vala'au a'o le'i fa'aalia pe natia le elemene e mafai ona pa'u (fa'atusa a'o le'i tupu le shown.bs.collapsepo'o le hidden.bs.collapsemea na tupu).

.collapse('show')

Fa'aalia se elemene e mafai ona pa'u. Toe fo'i i le tagata vala'au a'o le'i fa'aalia moni le elemene e mafai ona pa'u (fa'atusa a'o le'i tupu le shown.bs.collapsemea na tupu).

.collapse('hide')

Natia se elemene e mafai ona pa'u. Toe fo'i i le tagata vala'au a'o le'i natia moni le elemene e mafai ona pa'u (fa'atusa a'o le'i tupu le hidden.bs.collapsemea na tupu).

.collapse('dispose')

Fa'aleagaina le pa'u o se elemene.

Mea na tutupu

O le vasega pa'u a Bootstrap o lo'o fa'aalia ni nai mea na tutupu mo le fa'aogaina o galuega fa'aletonu.

Ituaiga Mea Fa'amatalaga
fa'aali.bs.pa'ū E mu vave lenei mea pe a showvalaʻau le auala faʻataʻitaʻiga.
fa'aalia.bs.pa'u O lenei mea e tupu pe a faʻaalia se elemene paʻu i le tagata faʻaoga (o le a faʻatali mo suiga CSS e faʻauma).
hide.bs.collapse O lenei mea na tupu e faʻamalo vave pe a hidevalaʻau le metotia.
hidden.bs.collapse O lenei mea e tupu pe a natia se elemene pa'ū mai le tagata faʻaoga (o le a faʻatali mo suiga CSS e maeʻa). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})