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.

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-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-toggle="collapse"és necessari.

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

Horitzontal

El connector de col·lapse també admet el col·lapse horitzontal. Afegiu la .widthclasse 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-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>

Múltiples objectius

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

Exemple d'acordió

Amb el component de la targeta , podeu ampliar el comportament de col·lapse predeterminat per crear un acordió. Per aconseguir correctament l'estil d'acordió, assegureu-vos d'utilitzar-lo .accordioncom a embolcall.

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

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" a l'element.

Si el vostre element de control està orientat a un únic element plegable, és a dir, l' data-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 del teclat descrites al patró d'acordió de la Guia de pràctiques d'autor d'ARIA ; haureu d'incloure-les vosaltres mateixos amb JavaScript personalitzat.

Ú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-toggle="collapse"i a data-targeta l'element per assignar automàticament el control d'un o més elements plegables. L' data-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-parent="#selector". Consulteu la demostració per veure-ho en acció.

Mitjançant JavaScript

Habilita manualment amb:

$('.collapse').collapse()

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-, com a data-parent="".

Mètodes

.collapse(options)

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

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('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

.collapse('show')

Mostra un element plegable. Torna a la persona que truca abans que s'hagi mostrat realment l'element plegable (és a dir, abans shown.bs.collapseque es produeixi l'esdeveniment).

.collapse('hide')

Amaga un element plegable. Torna a la persona que truca abans que l'element plegable s'hagi amagat (és a dir, abans hidden.bs.collapseque es produeixi l'esdeveniment).

.collapse('dispose')

Destrueix el col·lapse d'un element.

Esdeveniments

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

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