Collapse
Alterna la visibilidad del contenido en tu proyecto con algunas clases y nuestros complementos de JavaScript.

¿Qué es Collapse?
El complemento JavaScript Collapse se utiliza para mostrar y ocultar contenido. Los botones o enlaces se utilizan como disparadores que se asignan a elementos específicos que alternan. Colapsar un elemento animará la height
desde su valor actual hasta 0
. Dada la forma en que CSS maneja las animaciones, no puedes usar padding
en un elemento .collapse
. En su lugar, utiliza la clase como un elemento envolvente independiente.
prefers-reduced-motion
. Consulta la sección de movimiento reducido de nuestra documentación de accesibilidad.
Ejemplo de Collapse
Haz clic en los botones de abajo para mostrar y ocultar otro elemento a través de cambios de clase:
.collapse
oculta el contenido.collapsing
se aplica durante las transiciones.collapse.show
muestra el contenido
Generalmente, recomendamos usar un botón con el atributo data-bs-target
. Si bien no se recomienda desde un punto de vista semántico, también puedes usar un enlace con el atributo href
(y un role="button"
). En ambos casos, se requiere data-bs-toggle="collapse"
.
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Enlace con href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Botón con data-bs-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Algún contenido placeholder para el componente de contracción. Este panel está oculto de forma predeterminada, pero se revela cuando el usuario activa el disparador correspondiente.
</div>
</div>
Tal vez te interese
Horizontal
El complemento de Collapse también admite el colapso horizontal. Agrega la clase modificadora .collapse-horizontal
para cambiar el width
en lugar de height
y establece un width
en el elemento secundario inmediato. Siéntete libre de escribir tu propio Sass personalizado, usar estilos en línea o usar nuestras utilidades de ancho.
min-height
para evitar repintados excesivos en nuestros documentos, esto no es un requisito explícito. Solo se requiere el width
en el elemento secundario.
<p>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Toggle con collapse
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse collapse-horizontal" id="collapseWidthExample">
<div class="card card-body" style="width: 300px;">
Este es un contenido placeholder para un colapso horizontal. Está oculto de forma predeterminada y se muestra cuando se activa.
</div>
</div>
</div>
Múltiples objetivos
Un <button>
o <a>
puede mostrar y ocultar varios elementos al hacer referencia a ellos con un selector en su atributo href
o data-bs-target
.
Múltiples <button>
o <a>
pueden mostrar y ocultar un elemento si cada uno hace referencia a él con su atributo href
o data-bs-target
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Alternar el primer elemento</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Alternar el segundo elemento</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Alternar ambos elementos</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Algún contenido placeholder para el primer componente de colapso de este ejemplo de colapso múltiple. Este panel está oculto de forma predeterminada, pero se revela cuando el usuario activa el disparador correspondiente.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Parte del contenido placeholder para el segundo componente de contracción de este ejemplo de contracción múltiple. Este panel está oculto de forma predeterminada, pero se revela cuando el usuario activa el disparador correspondiente.
</div>
</div>
</div>
</div>
Accesibilidad
Asegúrate de agregar 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 contraíble está cerrado de forma predeterminada, el atributo del elemento de control debe tener un valor de aria-expanded="false"
. Si configuraste el elemento contraíble para que se abra de manera predeterminada mediante la clase show
, configura 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 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>
), se debes agregar el atributo role="button"
al elemento.
Si tu elemento de control apunta a un solo elemento contraíble, es decir, el atributo data-bs-target
apunta a un selector id
, debes agregar el atributo aria-controls
al elemento de control, que contiene el id
del elemento plegable. 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.
Ten en cuenta que la implementación actual de Bootstrap no cubre las diversas interacciones de teclado opcionales descritas en el patrón de acordeón WAI-ARIA Authoring Practices 1.1, deberás incluirlos tú mismo con JavaScript personalizado.
Sass
Variables
$transition-collapse: height .35s ease;
$transition-collapse-width: width .35s ease;
Clases
Las clases de transición de Collapse se pueden encontrar en scss/_transitions.scss
, ya que se comparten entre varios componentes (collapse y accordion).
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);
&.collapse-horizontal {
width: 0;
height: auto;
@include transition($transition-collapse-width);
}
}
Uso
El complemento Collapse utiliza algunas clases para manejar el trabajo pesado:
.collapse
oculta el contenido.collapse.show
muestra el contenido.collapsing
se 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 agrega data-bs-toggle="collapse"
y data-bs-target
al elemento para asignar automáticamente el control de uno o más elementos colapsables. El atributo data-bs-target
acepta un selector CSS para aplicar el colapso. Asegúrate de agregar la clase collapse
al elemento colapsable. Si deseas que se abra por defecto, agrega la clase adicional show
.
Para agregar una gestión de grupos similar a un acordeón a un área contraíble, agrega el atributo de datos data-bs-parent="#selector"
. Consulta la página de Accordion para obtener más información.
A través de JavaScript
Habilitar manualmente con:
var collapseElementList = Array.prototype.slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
Tal vez te interese
Opciones
Las opciones se pueden pasar a través de atributos de datos o JavaScript. Para los atributos de datos, agrega el nombre de la opción a data-bs-
, como en data-bs-parent=""
.
Nombre | Tipo | Por defecto | Descripción |
---|---|---|---|
parent |
selector | jQuery object | DOM element | false |
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 clase card ). El atributo debe establecerse en el área contraíble de destino. |
toggle |
boolean | true |
Alterna el elemento contraíble en la invocación |
Métodos
Transiciones y métodos asíncronos
Todos los métodos de la API son asincrónicos e inician una transition. Regresan al lugar donde se realizó la llamada 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 medio de una transición.
Consulte nuestra documentación de JavaScript para obtener más información.
Activa tu contenido como un elemento colapsable. Acepta un object
de opciones opcionales.
Puedes crear una instancia de Collapse con el constructor, por ejemplo:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
Método | Descripción |
---|---|
toggle |
Alterna un elemento colapsable para mostrarlo u ocultarlo. Regresa al punto de la llamada antes de que el elemento contraíble se haya mostrado u ocultado (es decir, antes de que ocurra un evento shown.bs.collapse o hidden.bs.collapse ). |
show |
Muestra un elemento colapsable. Regresa al punto de la llamada antes de que se haya mostrado realmente el elemento contraíble (por ejemplo, antes de que ocurra el evento shown.bs.collapse ). |
hide |
Oculta un elemento contraíble. Vuelve al punto de la llamada antes de que el elemento contraíble se haya ocultado (por ejemplo, antes de que ocurra el evento hidden.bs.collapse ). |
dispose |
Destruye el colapso de un elemento. (Elimina los datos almacenados en el elemento DOM) |
getInstance
|
Método estático que te permite obtener la instancia del Collapse asociada a un elemento DOM, puedes usarlo así: bootstrap.Collapse.getInstance(element)
|
getOrCreateInstance
|
Método estático que devuelve una instancia del Collapse asociada a un elemento DOM o crea una nueva en caso de que no se haya inicializado.
Puedes usarlo así: bootstrap.Collapse.getOrCreateInstance(element)
|
Tal vez te interese
Eventos
La clase Collapse de Bootstrap expone algunos eventos para conectarse a la funcionalidad de Collapse.
Tipo de evento | Descripción |
---|---|
show.bs.collapse |
Este evento se activa inmediatamente cuando se llama al método de instancia show . |
shown.bs.collapse |
Este evento se activa cuando un elemento collapse se hace visible para el usuario (esperará a que se completen las transiciones CSS). |
hide.bs.collapse |
Este evento se activa inmediatamente cuando se llama al método hide . |
hidden.bs.collapse |
Este evento se activa cuando un elemento collapse se ha ocultado al usuario (esperará a que se completen las transiciones CSS). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// hacer algo...
})