Collapse
Cambie la visibilidad del contenido en su proyecto con algunas clases y nuestros complementos de JavaScript.
Cómo funciona
El complemento de colapso de JavaScript se utiliza para mostrar y ocultar contenido.
Los botones o anclajes se utilizan como activadores que se asignan a elementos específicos que alternas.
Al contraer un elemento, se animará
height
desde su valor actual a
0
. Dado que CSS maneja las animaciones, no se pueden usar
padding
en un
.collapse
elemento. En su lugar, use la clase como un elemento de envoltura independiente.
El efecto de animación de este componente depende de la
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:
.collapseoculta contenido.collapsingse aplica durante las transiciones.collapse.showmuestra contenido
Puede utilizar un enlace con el
href
atributo o un botón con el
data-target
atributo. En ambos casos,
data-toggle="collapse"
se requiere.
<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>Varios objetivos
A <button>o
<a>
puede mostrar y ocultar varios elementos haciendo referencia a ellos con un selector de JQuery en su atributo
href o
data-target.
Múltiple
<button> o
<a>
puede mostrar y ocultar un elemento si cada uno hace referencia a él con su atributo
href o
data-target
<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.
Para lograr correctamente el estilo de acordeón, asegúrese de usarlo
.accordion
como envoltorio.
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h2>
</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">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h2>
</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">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h2>
</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-expanded
al elemento de control.
Este atributo transmite explícitamente el estado actual del elemento
plegable vinculado al control a lectores de pantalla y tecnologías de asistencia similares.
Si el elemento plegable está cerrado de forma predeterminada, el atributo
del elemento de control debe tener un valor de
aria-expanded="false"
. Si ha configurado el elemento plegable para que esté abierto de forma predeterminada utilizando la
show
clase, configúrelo
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 (p. Ej., Un
<a> o
<div>
), el atributo
role="button"
debe agregarse al elemento.
Si su elemento de control está apuntando a un único elemento plegable, es
decir, el
data-target
atributo apunta a un
id
selector, debe agregar el
aria-controls
atributo al elemento de control, que contiene el
id
del elemento plegable.
Los lectores de pantalla modernos y 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í.
Tenga en cuenta 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 ; 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 quita cuando termina
Estas clases se pueden encontrar en
_transitions.scss.
A través de atributos de datos
Simplemente agregue
data-toggle="collapse"y
data-target
a al elemento para asignar automáticamente el control de uno o más elementos plegables.
El data-target
atributo acepta un selector de CSS para aplicar la contracción.
Asegúrese de agregar la clase
collapse
al elemento plegable.
Si desea que se abra de forma predeterminada, agregue la clase adicional
show.
Para agregar una gestión de grupo similar a un acordeón a un área plegable, agregue el atributo de datos
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 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 | Tipo | Defecto | Descripción |
|---|---|---|---|
| padre | selector | objeto jQuery | Elemento DOM | falso |
Si se proporciona un elemento principal, todos los elementos
contraíbles del elemento principal 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 plegable de destino.
|
| palanca | booleano | cierto | Alterna el elemento plegable en la invocación |
Métodos
Transiciones y métodos asincrónicos
Todos los métodos API son asincrónicos 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 a un método en un componente en transición.
Consulte nuestra documentación de JavaScript para obtener más información .
.collapse(options)
Activa su contenido como un elemento plegable. Acepta opciones opcionales
object.
$('#myCollapsible').collapse({
toggle: false
}).collapse('toggle')
Cambia un elemento plegable a mostrado u oculto.
Vuelve a la persona que llama antes de que el elemento plegable 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 plegable
(es decir, antes de
shown.bs.collapse
que ocurra el evento).
.collapse('hide')
Oculta un elemento plegable.
Vuelve a la persona que llama antes de que el elemento plegable se haya ocultado
(es decir, antes de
hidden.bs.collapse
que 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
show
se llama al método de instancia.
|
| mostrado.bs.collapse | Este evento se activa cuando un elemento de contracción se ha hecho 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 CSS). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})