Col·lapse

Com funciona

El connector de JavaScript de col·lapse s'utilitza per mostrar i ocultar contingut. Els botons o ancoratges s'utilitzen com a activadors que s'assignen a elements específics que activeu. Si col·laps un element, s'animarà heightdel seu valor actual a 0. Tenint en compte com CSS gestiona les animacions, no es pot utilitzar paddingen un .collapseelement. En comptes d'això, utilitzeu la classe com a element d'embolcall independent.

Exemple

Feu clic als botons següents per mostrar i amagar un altre element mitjançant els canvis de classe:

• .collapseamaga contingut
• .collapsings'aplica durant les transicions
• .collapse.showmostra contingut

En general, recomanem utilitzar un botó amb l' data-bs-targetatribut. Tot i que no es recomana des d'un punt de vista semàntic, també podeu utilitzar un enllaç amb l' hrefatribut (i un role="button"). En ambdós casos, data-bs-toggle="collapse"és necessari.

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

Horitzontal

El connector de col·lapse també admet el col·lapse horitzontal. Afegiu la .collapse-horizontalclasse modificadora per fer la transició widthen lloc de heighti establiu a widtha l'element fill immediat. No dubteu a escriure el vostre propi Sass personalitzat, utilitzar estils en línia o utilitzar les nostres utilitats d'amplada .

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

Múltiples objectius

A <button>o <a>pot mostrar i ocultar diversos elements fent-los referència amb un selector al seu atribut hrefo . data-bs-targetMúltiples <button>o <a>poden mostrar i amagar un element si cadascun hi fa referència amb el seu atribut hrefodata-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>

Accessibilitat

Assegureu-vos d'afegir aria-expandeda l'element de control. Aquest atribut transmet explícitament l'estat actual de l'element plegable vinculat al control als lectors de pantalla i tecnologies d'assistència similars. Si l'element plegable es tanca per defecte, l'atribut de l'element de control hauria de tenir un valor de aria-expanded="false". Si heu configurat l'element plegable perquè estigui obert de manera predeterminada mitjançant la showclasse, configureu aria-expanded="true"-lo al control. El connector canviarà automàticament aquest atribut al control en funció de si l'element plegable s'ha obert o tancat (mitjançant JavaScript, o perquè l'usuari ha activat un altre element de control també lligat al mateix element plegable). Si l'element HTML de l'element de control no és un botó (per exemple, un <a>o <div>), l'atributrole="button"s'ha d'afegir a l'element.

Si el vostre element de control està orientat a un únic element plegable, és a dir, l' data-bs-targetatribut apunta a un idselector, hauríeu d'afegir l' aria-controlsatribut a l'element de control, que conté l' idelement de l'element plegable. Els lectors de pantalla moderns i tecnologies d'assistència similars fan ús d'aquest atribut per oferir als usuaris dreceres addicionals per navegar directament a l'element plegable.

Tingueu en compte que la implementació actual de Bootstrap no cobreix les diferents interaccions de teclat opcionals descrites al patró d'acordió de la Guia de pràctiques d'autor d'ARIA ; haureu d'incloure-les vosaltres mateixos amb JavaScript personalitzat.

Sass

Les variables

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

Classes

Es poden trobar classes de transició de col·lapse, scss/_transitions.scssja que es comparteixen entre diversos components (col·lapse i acordió).

.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);
  }
}

Ús

El connector de col·lapse utilitza unes quantes classes per gestionar el treball pesat:

• .collapseamaga el contingut
• .collapse.showmostra el contingut
• .collapsings'afegeix quan comença la transició i s'elimina quan s'acaba

Aquestes classes es poden trobar a _transitions.scss.

Mitjançant atributs de dades

Només cal afegir data-bs-toggle="collapse"i a data-bs-targeta l'element per assignar automàticament el control d'un o més elements plegables. L' data-bs-targetatribut accepta un selector CSS al qual aplicar el col·lapse. Assegureu-vos d'afegir la classe collapsea l'element plegable. Si voleu que s'obri per defecte, afegiu la classe addicional show.

Per afegir una gestió de grups semblant a un acordió a una àrea plegable, afegiu l'atribut de dades data-bs-parent="#selector". Consulteu la pàgina d'acordió per a més informació.

Mitjançant JavaScript

Habilita manualment amb:

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

Opcions

Com que les opcions es poden passar mitjançant atributs de dades o JavaScript, podeu afegir un nom d'opció a data-bs-, com a data-bs-animation="{value}". Assegureu-vos de canviar el tipus de cas del nom de l'opció de " camelCase " a " kebab-case " quan passeu les opcions mitjançant atributs de dades. Per exemple, utilitzeu data-bs-custom-class="beautifier"en comptes de data-bs-customClass="beautifier".

A partir de Bootstrap 5.2.0, tots els components admeten un atribut de dades reservades experimentalsdata-bs-config que pot albergar una configuració senzilla de components com a cadena JSON. Quan un element té data-bs-config='{"delay":0, "title":123}'i data-bs-title="456"atributs, el titlevalor final serà 456i els atributs de dades independents substituiran els valors donats a data-bs-config. A més, els atributs de dades existents poden albergar valors JSON com data-bs-delay='{"show":0,"hide":150}'.

Mètodes

Activa el teu contingut com a element plegable. Accepta opcions opcionals object.

Podeu crear una instància de col·lapse amb el constructor, per exemple:

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

Esdeveniments

La classe de col·lapse de Bootstrap exposa alguns esdeveniments per connectar-se a la funcionalitat de col·lapse.

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