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.

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 masani lava, matou te fautuaina le faʻaogaina o se faʻamau ma le data-targetuiga. E ui e le fautuaina mai se manatu faʻapitoa, e mafai foi ona e faʻaogaina se fesoʻotaʻiga ma le hrefuiga (ma le role="button"). I tulaga uma e lua, data-toggle="collapse"e manaʻomia.

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

Fa'asagaga

O lo'o lagolagoina fo'i e le fa'apalapala fa'apalapala fa'apalapala. Fa'aopoopo le .widthvasega fa'aliliuga e fa'asolo ai le widthma heightfa'atū widthi luga o le elemene tamaiti vave. Lagona le saoloto e tusi lau lava Sass masani, faʻaoga sitaili laina, poʻo le faʻaogaina o matou lautele faʻaoga .

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

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

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

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.

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

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 a Bootstrap o loʻo iai nei e le o aofia ai fesoʻotaʻiga keyboard eseese o loʻo faʻamatalaina i le ARIA Authoring Practices Guide 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. E data-targettalia e le uiga le 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="".

Metotia

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

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