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 o lo'o e fesuia'i. O le soloia o se elemene o le a fa'aola ai le heightmai lona tau o lo'o iai nei i le 0. Tuuina atu pe faʻafefea ona faʻaogaina e le CSS faʻafiafiaga, 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.

O le aafiaga o le animation o lenei vaega e fa'alagolago i le su'esu'ega a le prefers-reduced-motionaufaasālalau. Va'ai le vaega fa'aitiitiga fa'aitiitiga oa matou pepa fa'aoga avanoa .

Faataitaiga

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

.collapsenatia mea e aofia ai
.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.

So'oga ma href

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

Sui elemene muamua

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. Ina ia ausia lelei le sitaili accordion, ia mautinoa e faʻaaoga .accordione fai ma afifi.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 luko masina officia aute, e le o se ipu laupapa sikatusi mo brunch. loli meaai quinoa nesciunt laborum eiusmod. Brunch 3 luko moon tempor, sunt aliqua tu'u 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 laboure 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">
      <h2 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>
      </h2>
    </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">
      <h2 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>
      </h2>
    </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">
      <h2 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>
      </h2>
    </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 i le au faitau mata'itusi 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 mea 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 tapuni 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 nonoa i le elemene tutusa lava). Afai o le elemene HTML e pulea e le o se faamau (faataitaiga, <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 fa'atatau i se elemene e tasi e mafai ona pa'u - 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. Ua 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'atautaia sa'o ai i le elemene e mafai ona pa'u.

Manatua o le faʻatinoga o Bootstrap i le taimi 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 taulima 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 ona tu'uina atu le fa'atonuga o se tasi pe 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 `card`vasega). 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ʻiaina se auala e valaʻau ai i se vaega o suiga .

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

`.collapse(options)`

Fa'aagaoioia lau anotusi o se elemene 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 `show`valaʻ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 maeʻa).
hide.bs.collapse	O lenei mea na tupu e faʻamalo vave pe a `hide`valaʻ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...
})