Pa'u

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:

• .collapsenana mea
• .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-bs-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-bs-toggle="collapse"e manaʻomia.

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-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 le fa'ata'atia. Fa'aopoopo le .collapse-horizontalvasega 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 i totonu, pe faʻaaoga a matou mea faʻaoga lautele .

<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      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'aali ma nana ni elemene se tele e ala i le fa'asinoina i se tagata filifilia i lona uiga hrefpo'o lona data-bs-targetuiga. Fa'atele <button>pe mafai ona fa'aali ma nana se elemene pe a ta'ua ta'itasi ma o <a>latou uigahrefdata-bs-target

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

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 tapuni le elemene collapsible (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 (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-bs-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.

Sass

Fuafuaga

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

Vasega

E mafai ona maua vasega suiga i lalo ona scss/_transitions.scsso lo'o fefa'asoaa'i i vaega e tele (pa'u ma accordion).

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);

  &.collapse-horizontal {
    width: 0;
    height: auto;
    @include transition($transition-collapse-width);
  }
}

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-bs-toggle="collapse"ma le a data-bs-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-bs-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-bs-parent="#selector". Va'ai ile itulau accordion mo nisi fa'amatalaga.

E ala i le JavaScript

Fa'aaga ma le lima ile:

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

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-bs-, pei o le data-bs-parent="".

Metotia

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

E mafai ona e fatuina se faʻataʻitaʻiga pa'ū ma le faufale, mo se faʻataʻitaʻiga:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})

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.

var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})