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á height
desde su valor actual hasta 0
. Dada la forma en que CSS maneja las animaciones, no se puede usar padding
en un .collapse
elemento. En su lugar, utilice la clase como un elemento envolvente independiente.
prefers-reduced-motion
consulta de medios. Consulte la
sección de movimiento reducido de nuestra documentación de accesibilidad .
Ejemplo
Haga clic en los botones de abajo para mostrar y ocultar otro elemento a través de cambios de clase:
.collapse
oculta contenido.collapsing
se aplica durante las transiciones.collapse.show
muestra contenido
Generalmente, recomendamos usar un botón con el data-bs-target
atributo. Si bien no se recomienda desde un punto de vista semántico, también puede usar un enlace con el href
atributo (y un role="button"
). En ambos casos, data-bs-toggle="collapse"
se requiere el.
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-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>
Horizontal
El complemento de colapso también admite el colapso horizontal. Agregue la .collapse-horizontal
clase de modificador para hacer la transición width
en lugar de height
y establezca a width
en el elemento secundario inmediato. Siéntase libre de escribir su propio Sass personalizado, usar estilos en línea o usar nuestras utilidades de ancho .
min-height
conjunto para evitar repintados excesivos en nuestros documentos, esto no es un requisito explícito.
Solo width
se requiere 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 width collapse
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse collapse-horizontal" id="collapseWidthExample">
<div class="card card-body" style="width: 300px;">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</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
odata-bs-target
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-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>
Accesibilidad
Asegúrese 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 configuró el elemento contraíble para que se abra de forma predeterminada usando la show
clase, 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-bs-target
atributo apunta a un id
selector, debe agregar el aria-controls
atributo al elemento de control, que contiene el id
del 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 de teclado opcionales descritas en el patrón de acordeón WAI-ARIA Authoring Practices 1.1 ; deberá incluirlas usted mismo con JavaScript personalizado.
Hablar con descaro a
Variables
$transition-collapse: height .35s ease;
$transition-collapse-width: width .35s ease;
Clases
Las clases de transición de colapso se pueden encontrar en scss/_transitions.scss
ya que se comparten entre varios componentes (colapso y acordeón).
.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 de colapso 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 agregue data-bs-toggle="collapse"
y data-bs-target
al elemento para asignar automáticamente el control de uno o más elementos contraíbles. El data-bs-target
atributo acepta un selector de CSS para aplicar el colapso. Asegúrese de agregar la clase collapse
al 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-bs-parent="#selector"
. Consulte la página del acordeón para obtener más información.
A través de JavaScript
Habilitar manualmente con:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
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-bs-
, como en data-bs-parent=""
.
Nombre | Escribe | Defecto | Descripción |
---|---|---|---|
parent |
seleccionador | objeto jQuery | elemento DOM | 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 card clase). El atributo debe establecerse en el área contraíble de destino. |
toggle |
booleano | true |
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 .
Activa tu contenido como un elemento colapsable. Acepta opciones opcionales object
.
Puede crear una instancia de colapso con el constructor, por ejemplo:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
Método | Descripción |
---|---|
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.collapse o ).hidden.bs.collapse |
show |
Muestra un elemento plegable. Vuelve a la persona que llama antes de que se haya mostrado realmente el elemento contraíble (por ejemplo, antes de shown.bs.collapse que ocurra el evento). |
hide |
Oculta un elemento contraíble. Vuelve a la persona que llama antes de que el elemento contraíble se haya ocultado (por ejemplo, antes de hidden.bs.collapse que ocurra el evento). |
dispose |
Destruye el colapso de un elemento. (Elimina los datos almacenados en el elemento DOM) |
getInstance |
Método estático que le permite obtener la instancia de colapso asociada a un elemento DOM, puede usarlo así:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
Método estático que devuelve una instancia de colapso asociada a un elemento DOM o crea una nueva en caso de que no se haya inicializado. Puedes usarlo así:bootstrap.Collapse.getOrCreateInstance(element) |
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 show se llama al método de instancia. |
shown.bs.collapse |
Este evento se activa cuando un elemento colapsado se hace visible para el usuario (esperará a que se completen las transiciones CSS). |
hide.bs.collapse |
Este evento se activa inmediatamente cuando hide se llama al método. |
hidden.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). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})