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:

• .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-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 fa'apalapala. 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 laina, poʻo le faʻaogaina o matou lautele faʻaoga .

<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 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-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. 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 fa'apolokalame eseese o lo'o fa'amatalaina i le ARIA Authoring Practices Guide accordion pattern - e mana'omia lou fa'aofiina o nei mea i le JavaScript custom.

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:

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

Filifiliga

A'o mafai ona pasia filifiliga e ala i fa'amatalaga uiga po'o le JavaScript, e mafai ona e fa'aopoopoina se igoa filifiliga i le data-bs-, pei o le data-bs-animation="{value}". Ia mautinoa e sui le ituaiga mataupu o le igoa filifiliga mai le " CamelCase " i le " kebab-case " pe a pasia filifiliga e ala i faʻamatalaga uiga. Mo se faʻataʻitaʻiga, faʻaaoga data-bs-custom-class="beautifier"nai lo le data-bs-customClass="beautifier".

E pei o le Bootstrap 5.2.0, o vaega uma e lagolagoina se faʻataʻitaʻiga faʻaagaga faʻamaumauga uiga data-bs-confige mafai ona faʻapipiʻi faigofie vaega faʻapipiʻi o se manoa JSON. Afai ei ai se elemene data-bs-config='{"delay":0, "title":123}'ma data-bs-title="456"uiga, o le titletau mulimuli o le ai ai 456ma o faʻamatalaga faʻamatalaga uiga ese o le a faʻamalo ai tau o loʻo tuʻuina atu ile data-bs-config. E le gata i lea, o faʻamaumauga o loʻo i ai nei e mafai ona faʻapipiʻi JSON tau pei o data-bs-delay='{"show":0,"hide":150}'.

Metotia

Fa'aagaoioia lau anotusi o se elemene 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:

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

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // do something...
})