Source

Colapsar

Alterne la visibilidad del contenido en su proyecto con algunas clases y nuestros complementos de JavaScript.

Cómo funciona

El complemento JavaScript de colapso se utiliza para mostrar y ocultar contenido. Los botones o anclas se utilizan como disparadores que se asignan a elementos específicos que alterna. Al contraer un elemento, se animará heightdesde su valor actual hasta 0. Dada la forma en que CSS maneja las animaciones, no se puede usar paddingen un .collapseelemento. En su lugar, utilice la clase como un elemento envolvente independiente.

Ejemplo

Haga clic en los botones de abajo para mostrar y ocultar otro elemento a través de cambios de clase:

  • .collapseoculta contenido
  • .collapsingse aplica durante las transiciones
  • .collapse.showmuestra contenido

Puede usar un enlace con el hrefatributo o un botón con el data-targetatributo. En ambos casos, data-toggle="collapse"se requiere el.

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 objetivos

Un <button>or <a>puede mostrar y ocultar varios elementos al hacer referencia a ellos con un selector de JQuery en su atributo hrefor . data-targetMúltiples <button>o <a>pueden mostrar y ocultar un elemento si cada uno hace referencia a él con su atributo hrefodata-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>

Ejemplo de acordeón

Con el componente de tarjeta , puede ampliar el comportamiento de contracción predeterminado para crear un acordeón.

Anim pariatur cliché reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon oficia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 lobo luna tempor, sunt aliqua puso un pájaro en él calamares café de origen único nulla asunción shoreditch et. Nihil anim keffiyeh helvetica, cerveza artesanal labore wes anderson cred nesciunt sapiente ea proident. Anuncio vegano excepteur carnicero vice lomo. Leggings occaecat cerveza artesanal de la granja a la mesa, denim crudo estética sintetizador nesciunt probablemente no hayas oído hablar de ellos accusamus labore sostenible 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>

Accesibilidad

Asegúrese de agregar aria-expandedal elemento de control. Este atributo transmite explícitamente el estado actual del elemento plegable vinculado al control a los lectores de pantalla y tecnologías de asistencia similares. Si el elemento contraíble está cerrado de forma predeterminada, el atributo del elemento de control debe tener un valor de aria-expanded="false". Si configuró el elemento contraíble para que se abra de forma predeterminada usando la showclase, configúrelo aria-expanded="true"en el control en su lugar. El complemento alternará automáticamente este atributo en el control en función de si el elemento plegable se ha abierto o cerrado (a través de JavaScript, o porque el usuario activó otro elemento de control también vinculado al mismo elemento plegable). Si el elemento HTML del elemento de control no es un botón (por ejemplo, un <a>o <div>), el atributorole="button"debe agregarse al elemento.

Si su elemento de control apunta a un solo elemento contraíble, es decir, el data-targetatributo apunta a un idselector, debe agregar el aria-controlsatributo al elemento de control, que contiene el iddel elemento contraíble. Los lectores de pantalla modernos y las tecnologías de asistencia similares hacen uso de este atributo para proporcionar a los usuarios accesos directos adicionales para navegar directamente al propio elemento contraíble.

Tenga en cuenta que la implementación actual de Bootstrap no cubre las diversas interacciones del teclado descritas en el patrón de acordeón WAI-ARIA Authoring Practices 1.1 ; deberá incluirlas usted mismo con JavaScript personalizado.

Uso

El complemento de colapso utiliza algunas clases para manejar el trabajo pesado:

  • .collapseoculta el contenido
  • .collapse.showmuestra el contenido
  • .collapsingse agrega cuando comienza la transición y se elimina cuando finaliza

Estas clases se pueden encontrar en _transitions.scss.

A través de atributos de datos

Simplemente agregue data-toggle="collapse"y data-targetal elemento para asignar automáticamente el control de uno o más elementos contraíbles. El data-targetatributo acepta un selector de CSS para aplicar el colapso. Asegúrese de agregar la clase collapseal elemento contraíble. Si desea que se abra de forma predeterminada, agregue la clase adicional show.

Para agregar una administración de grupos similar a un acordeón a un área contraíble, agregue el atributo de datos data-parent="#selector". Consulte la demostración para ver esto en acción.

A través de JavaScript

Habilitar manualmente con:

$('.collapse').collapse()

Opciones

Las opciones se pueden pasar a través de atributos de datos o JavaScript. Para los atributos de datos, agregue el nombre de la opción a data-, como en data-parent="".

Nombre Escribe Defecto Descripción
padre seleccionador | objeto jQuery | elemento DOM falso Si se proporciona el padre, todos los elementos contraíbles bajo el padre especificado se cerrarán cuando se muestre este elemento contraíble. (similar al comportamiento tradicional del acordeón; esto depende de la cardclase). El atributo debe establecerse en el área contraíble de destino.
palanca booleano verdadero Alterna el elemento contraíble en la invocación

Métodos

Transiciones y métodos asíncronos

Todos los métodos de API son asíncronos e inician una transición . Vuelven a la persona que llama tan pronto como se inicia la transición, pero antes de que finalice . Además, se ignorará una llamada de método en un componente en transición .

Consulte nuestra documentación de JavaScript para obtener más información.

.collapse(options)

Activa tu contenido como un elemento colapsable. Acepta opciones opcionales object.

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

.collapse('toggle')

Cambia un elemento colapsable a mostrado u oculto. Vuelve a la persona que llama antes de que el elemento contraíble se haya mostrado u ocultado (es decir, antes de que ocurra el evento shown.bs.collapseo ).hidden.bs.collapse

.collapse('show')

Muestra un elemento plegable. Vuelve a la persona que llama antes de que se haya mostrado realmente el elemento colapsable (es decir, antes de shown.bs.collapseque ocurra el evento).

.collapse('hide')

Oculta un elemento contraíble. Vuelve a la persona que llama antes de que el elemento contraíble se haya ocultado (es decir, antes de hidden.bs.collapseque ocurra el evento).

.collapse('dispose')

Destruye el colapso de un elemento.

Eventos

La clase de colapso de Bootstrap expone algunos eventos para conectarse a la funcionalidad de colapso.

Tipo de evento Descripción
show.bs.collapse Este evento se activa inmediatamente cuando showse llama al método de instancia.
mostrado.bs.collapse Este evento se activa cuando un elemento colapsado se hace visible para el usuario (esperará a que se completen las transiciones CSS).
ocultar.bs.collapse Este evento se activa inmediatamente cuando hidese llama al método.
oculto.bs.collapse Este evento se activa cuando un elemento de colapso se ha ocultado al usuario (esperará a que se completen las transiciones de CSS). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})