Saltar al contingut principal Saltar a la navegació de documents
in English

Col·lapse

Commuteu la visibilitat del contingut del vostre projecte amb algunes classes i els nostres connectors de JavaScript.

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.

L'efecte d'animació d'aquest component depèn de la prefers-reduced-motionconsulta de mitjans. Consulteu la secció de moviment reduït de la nostra documentació d'accessibilitat .

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.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<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>

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

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.
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.
<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 diverses interaccions opcionals del teclat descrites al patró d'acordió WAI-ARIA Authoring Practices 1.1 ; haureu d'incloure-les vosaltres mateixos amb JavaScript personalitzat.

Sass

Les variables

$transition-collapse:         height .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);
}

Ú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 demostració per veure-ho en acció.

Mitjançant JavaScript

Habilita manualment amb:

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

Opcions

Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-bs-, com a data-bs-parent="".

Nom Tipus Per defecte Descripció
parent selector | Objecte jQuery | Element DOM false Si es proporciona un element principal, es tancaran tots els elements plegables sota el pare especificat quan es mostri aquest element plegable. (semblant al comportament d'acordió tradicional - això depèn de la cardclasse). L'atribut s'ha d'establir a l'àrea plegable objectiu.
toggle booleà true Commuta l'element plegable en invocació

Mètodes

Mètodes asíncrons i transicions

Tots els mètodes de l'API són asíncrons i comencen una transició . Tornen a la persona que truca tan bon punt s'inicia la transició però abans que acabi . A més, s'ignorarà una trucada de mètode en un component en transició .

Consulteu la nostra documentació de JavaScript per obtenir més informació .

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:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})
Mètode Descripció
toggle Commuta un element plegable per mostrar-lo o amagar-lo. Torna a la persona que truca abans que l'element plegable s'hagi mostrat o amagat (és a dir, abans que es produeixi l'esdeveniment shown.bs.collapseo ).hidden.bs.collapse
show Mostra un element plegable. Torna a la persona que truca abans que s'hagi mostrat realment l'element plegable (p. ex., abans shown.bs.collapseque es produeixi l'esdeveniment).
hide Amaga un element plegable. Torna a la persona que truca abans que l'element plegable s'hagi amagat (per exemple, abans hidden.bs.collapseque es produeixi l'esdeveniment).
dispose Destrueix el col·lapse d'un element. (Elimina les dades emmagatzemades a l'element DOM)
getInstance Mètode estàtic que us permet obtenir la instància de col·lapse associada a un element DOM, podeu utilitzar-lo així:bootstrap.Collapse.getInstance(element)
getOrCreateInstance Mètode estàtic que retorna una instància de col·lapse associada a un element DOM o en crea una de nova en cas que no s'hagi inicialitzat. Podeu utilitzar-lo així:bootstrap.Collapse.getOrCreateInstance(element)

Esdeveniments

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

Tipus d'esdeveniment Descripció
show.bs.collapse Aquest esdeveniment s'activa immediatament quan showes crida al mètode d'instància.
shown.bs.collapse Aquest esdeveniment s'activa quan un element de col·lapse s'ha fet visible per a l'usuari (esperarà que finalitzin les transicions CSS).
hide.bs.collapse Aquest esdeveniment s'activa immediatament quan hides'ha cridat el mètode.
hidden.bs.collapse Aquest esdeveniment s'activa quan un element de col·lapse s'ha amagat per a l'usuari (esperarà que finalitzin les transicions CSS).
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})