Collapse - Bootstrap

Alterne la visibilidad del contenido en su proyecto con unas pocas clases y nuestros plugins de JavaScript.

Ejemplo

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

.collapse oculta el contenido
.collapsing se aplica durante las transiciones

.collapse.show muestra el contenido

Puedes utilizar un enlace con el atributo href, o un botón con el atributo data-target. En ambos casos, se requiere el data-toggle="collapse".

Enlace con href Botón con data-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.

Objetivos múltiples

Un <button> o <a> puede mostrar y ocultar múltiples elementos haciendo referencia a ellos con un selector JQuery en su atributo href o data-target.Varios <button> o <a> pueden mostrar y ocultar un elemento si cada uno de ellos hace referencia a él con su href o data-target atributo

Alternar primer elemento Alternar segundo elemento Alternar ambos elementos

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.

Ejemplo de acordeón

Usando el componente de tarjeta, puedes extender el comportamiento de colapso por defecto para crear un acordeón.

Archivo de grupo colapsable #1

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.

Partamento de grupo plegable #2

Partamento de grupo plegable #3

Accesibilidad

Asegúrate de añadir aria-expanded al 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 plegable está cerrado por defecto, el atributo en el elemento de control debe tener un valor de aria-expanded="false". Si has configurado el elemento plegable para que esté abierto por defecto utilizando la clase show, establece aria-expanded="true" en el control. 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 ha activado 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 atributo role="button" debe añadirse al elemento.

Si su elemento de control se dirige a un solo elemento colapsable – es decir el atributo data-target apunta a un selector id – debe añadir el atributo aria-controls al elemento de control, que contiene el id del elemento colapsable. 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 elemento plegable en sí.

Nota que la implementación actual de Bootstrap no cubre las diversas interacciones de teclado descritas en el patrón de acordeón WAI-ARIA Authoring Practices 1.1 – tendrás que incluirlas tú mismo con JavaScript personalizado.

Uso

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

.collapse oculta el contenido
.collapse.show muestra el contenido
.collapsing se añade cuando la transición comienza, y se elimina cuando termina

Estas clases se encuentran en _transitions.scss.

Por medio de atributos de datos

Sólo tienes que añadir data-toggle="collapse" y un data-target al elemento para asignar automáticamente el control de uno o varios elementos colapsables. El atributo data-target acepta un selector CSS para aplicar el colapso. Asegúrate de añadir la clase collapse al elemento colapsable. Si quieres que esté abierto por defecto, añade la clase adicional show.

Para añadir la gestión de grupos tipo acordeón a un área colapsable, añade el atributo data data-parent="#selector". Consulte la demostración para ver esto en acción.

Vía JavaScript

Habilitar manualmente con:

$('.collapse').collapse()

Opciones

Las opciones se pueden pasar vía atributos de datos o JavaScript. Para los atributos de datos, añada el nombre de la opción a data-, como en data-parent="".

Nombre	Tipo	Por defecto	Descripción
parent	selector \| objeto jQuery \| elemento DOM	false	Si se proporciona parent, entonces todos los elementos colapsables bajo el padre especificado se cerrarán cuando se muestre este elemento colapsable. (similar al comportamiento tradicional del acordeón – esto depende de la clase `card`). El atributo tiene que ser establecido en el área colapsable de destino.
toggle	boolean	true	Activa el elemento colapsable al invocarlo

Métodos

Métodos asíncronos y transiciones

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

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

`.collapse(options)`

Activa su contenido como un elemento colapsable. Acepta una opción opcional object.

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

`.collapse('toggle')`

Activa un elemento colapsable para mostrarlo u ocultarlo. Devuelve a la persona que llama antes de que el elemento plegable se haya mostrado u ocultado (es decir, antes de que se produzca el evento shown.bs.collapse o hidden.bs.collapse).

`.collapse('show')`

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

`.collapse('hide')`

Oculta un elemento plegable. Devuelve al llamante antes de que el elemento colapsable haya sido realmente ocultado (es decir, antes de que ocurra el evento hidden.bs.collapse).

`.collapse('dispose')`

Destruye el colapso de un elemento.

Eventos

La clase collapse de Bootstrap expone unos cuantos eventos para engancharse a la funcionalidad del colapso.

Evento Tipo	Descripción
show.bs.collapse	Este evento se dispara inmediatamente cuando se llama al método de instancia `show`.
shown.bs.collapse	Este evento se dispara cuando un elemento colapsado se ha hecho visible para el usuario (esperará a que se completen las transiciones CSS).	hide.bs.collapse	Este evento se dispara inmediatamente cuando se ha llamado al método `hide`.
hidden.bs.collapse	Este evento se dispara cuando un elemento collapse ha sido ocultado al usuario (esperará a que las transiciones CSS se completen).

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

Collapse (Español)