Source

Colapsar

Alterna a visibilidade do contido no teu proxecto con algunhas clases e os nosos complementos de JavaScript.

Cómo funciona

O complemento de contraer JavaScript úsase para mostrar e ocultar contido. Os botóns ou áncoras utilízanse como disparadores que se asignan a elementos específicos que alternas. Ao contraer un elemento animarase heightdende o seu valor actual ata 0. Dado como CSS xestiona as animacións, non se pode usar paddingnun .collapseelemento. En vez diso, use a clase como un elemento de envoltura independente.

Exemplo

Fai clic nos botóns seguintes para mostrar e ocultar outro elemento mediante os cambios de clase:

  • .collapseoculta o contido
  • .collapsingaplícase durante as transicións
  • .collapse.showmostra o contido

Podes usar unha ligazón co hrefatributo ou un botón co data-targetatributo. En ambos os casos, data-toggle="collapse"é necesario.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
<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">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

Múltiples obxectivos

A <button>ou <a>pode mostrar e ocultar varios elementos facendo referencia a eles cun selector JQuery no seu atributo hrefou . data-targetMúltiples <button>ou <a>poden mostrar e ocultar un elemento se cada un o fai referencia co seu atributo hrefoudata-target

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
<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">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

Exemplo de acordeón

Usando o compoñente tarxeta , pode ampliar o comportamento de contraer predeterminado para crear un acordeón.

Anímate a reprochar cliché, enim eiusmod high life acusa a Terry Richardson de calamar. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, son aliqua poñer un paxaro sobre el calamar café de orixe única nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur carniceiro vice lomo. Leggings occaecat cervexa artesanal da granxa á mesa, denim cru estética sintetizador nesciunt probablemente non escoitou falar deles accusamus labore sustentable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Accesibilidade

Asegúrese de engadir aria-expandedao elemento de control. Este atributo transmite de forma explícita o estado actual do elemento plegable vinculado ao control aos lectores de pantalla e tecnoloxías auxiliares similares. Se o elemento plegable está pechado por defecto, o atributo do elemento de control debería ter un valor de aria-expanded="false". Se configuraches o elemento plegable para que estea aberto de forma predeterminada usando a showclase, configura aria-expanded="true"o control. O complemento activará automaticamente este atributo no control en función de se se abriu ou non o elemento contraíble (a través de JavaScript ou porque o usuario disparou outro elemento de control tamén vinculado ao mesmo elemento plegable). Se o elemento HTML do elemento de control non é un botón (por exemplo, un <a>ou <div>), o atributorole="button"debe engadirse ao elemento.

Se o teu elemento de control está dirixido a un único elemento contraíble, é dicir, o data-targetatributo apunta a un idselector, deberías engadir o aria-controlsatributo ao elemento de control, que contén o idelemento do elemento contraíble. Os lectores de pantalla modernos e tecnoloxías de asistencia similares fan uso deste atributo para ofrecer aos usuarios atallos adicionais para navegar directamente ao propio elemento plegable.

Teña en conta que a implementación actual de Bootstrap non cobre as diversas interaccións do teclado descritas no patrón de acordeón WAI-ARIA Authoring Practices 1.1 ; terá que incluílas vostede mesmo con JavaScript personalizado.

Uso

O complemento de colapso utiliza algunhas clases para xestionar o traballo pesado:

  • .collapseoculta o contido
  • .collapse.showmostra o contido
  • .collapsingengádese cando comeza a transición e elimínase cando remata

Estas clases pódense atopar en _transitions.scss.

A través de atributos de datos

Só ten que engadir data-toggle="collapse"e data-targeta ao elemento para asignar automaticamente o control dun ou máis elementos plegables. O data-targetatributo acepta un selector CSS ao que aplicar o contraer. Asegúrate de engadir a clase collapseao elemento contraíble. Se queres que se abra por defecto, engade a clase adicional show.

Para engadir unha xestión de grupos de tipo acordeón a unha área plegable, engade o atributo de datos data-parent="#selector". Consulta a demostración para ver isto en acción.

Vía JavaScript

Habilitar manualmente con:

$('.collapse').collapse()

Opcións

As opcións pódense pasar a través de atributos de datos ou JavaScript. Para os atributos de datos, engada o nome da opción a data-, como en data-parent="".

Nome Tipo Por defecto Descrición
pai selector | obxecto jQuery | Elemento DOM falso Se se fornece o elemento principal, todos os elementos contraíbles baixo o pai especificado pecharanse cando se mostre este elemento contraíble. (semellante ao comportamento tradicional do acordeón - isto depende da cardclase). O atributo ten que ser definido na área de destino.
alternar booleano verdade Alterna o elemento contraíble na invocación

Métodos

Métodos asíncronos e transicións

Todos os métodos da API son asíncronos e inician unha transición . Volven ao interlocutor en canto se inicia a transición pero antes de que remate . Ademais, ignorarase unha chamada de método nun compoñente en transición .

Consulte a nosa documentación de JavaScript para obter máis información.

.collapse(options)

Activa o teu contido como elemento plegable. Acepta opcións opcionais object.

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

.collapse('toggle')

Alterna un elemento plegable para mostrar ou ocultar. Regresa ao interlocutor antes de que se amosase ou escondese o elemento plegable (é dicir, antes de que se produza o evento shown.bs.collapseou ).hidden.bs.collapse

.collapse('show')

Mostra un elemento plegable. Volve ao interlocutor antes de que se amosara realmente o elemento plegable (é dicir, antes de shown.bs.collapseque se produza o evento).

.collapse('hide')

Oculta un elemento plegable. Volve ao interlocutor antes de que o elemento plegable se escondese (é dicir, antes de hidden.bs.collapseque se produza o evento).

.collapse('dispose')

Destrúe o colapso dun elemento.

Eventos

A clase de colapso de Bootstrap expón algúns eventos para conectarse á funcionalidade de colapso.

Tipo de evento Descrición
mostrar.bs.colapso Este evento desenvólvese inmediatamente cando showse chama ao método de instancia.
mostrado.bs.colapso Este evento desenvólvese cando un elemento de contraer se fixo visible para o usuario (esperará a que se completen as transicións CSS).
ocultar.bs.colapso Este evento desenvólvese inmediatamente cando hidese chamou ao método.
oculto.bs.colapso Este evento desenvólvese cando se ocultou ao usuario un elemento de contraer (esperará a que se completen as transicións CSS). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})