Accordion
Construye accordions que colapsan verticalmente en combinación con nuestro plugin JavaScript Collapse.
On this page
Cómo funciona
El acordeón usa collapse internamente para hacerlo plegable.
El efecto de animación de este componente depende de la media query
prefers-reduced-motion. Consulta la sección de movimiento reducido de nuestra
documentación de accesibilidad.
Ejemplo
Haz clic en los accordions de abajo para expandir/colapsar el contenido del accordion.
Para renderizar un acordeón expandido por defecto:
- añade la clase
.showen el elemento.accordion-collapse. - quita la clase
.collapseddel elemento.accordion-buttony establece su atributoaria-expandedentrue.
Este es el cuerpo del acordeón del primer
elemento. Se muestra por defecto, hasta que el plugin collapse añade las clases
apropiadas que usamos para dar estilo a cada elemento. Estas clases controlan la apariencia general,
así como la visualización y ocultación mediante transiciones CSS. Puedes modificar cualquiera de
esto con CSS personalizado o sobrescribiendo nuestras variables por defecto. También vale la pena
señalar que casi cualquier HTML puede ir dentro del
.accordion-body, aunque la
transición sí limita el desbordamiento.Este es el cuerpo del acordeón del segundo
elemento. Está oculto por defecto, hasta que el plugin collapse añade las clases
apropiadas que usamos para dar estilo a cada elemento. Estas clases controlan la apariencia general,
así como la visualización y ocultación mediante transiciones CSS. Puedes modificar cualquiera de
esto con CSS personalizado o sobrescribiendo nuestras variables por defecto. También vale la pena
señalar que casi cualquier HTML puede ir dentro del
.accordion-body, aunque la
transición sí limita el desbordamiento.Este es el cuerpo del acordeón del tercer
elemento. Está oculto por defecto, hasta que el plugin collapse añade las clases
apropiadas que usamos para dar estilo a cada elemento. Estas clases controlan la apariencia general,
así como la visualización y ocultación mediante transiciones CSS. Puedes modificar cualquiera de
esto con CSS personalizado o sobrescribiendo nuestras variables por defecto. También vale la pena
señalar que casi cualquier HTML puede ir dentro del
.accordion-body, aunque la
transición sí limita el desbordamiento.<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item’s accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the second item’s accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the third item’s accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>Flush
Añade .accordion-flush para eliminar algunos bordes y esquinas redondeadas y
renderizar acordeones de borde a borde con su contenedor padre.
Contenido de marcador de posición para este acordeón,
que está destinado a demostrar la clase
.accordion-flush. Este es el cuerpo del
acordeón del primer elemento.Contenido de marcador de posición para este acordeón,
que está destinado a demostrar la clase
.accordion-flush. Este es el cuerpo del
acordeón del segundo elemento. Imaginemos que se llena con algún contenido real.Contenido de marcador de posición para este acordeón,
que está destinado a demostrar la clase
.accordion-flush. Este es el cuerpo del
acordeón del tercer elemento. Nada más emocionante que ver aquí en cuanto a contenido, pero
simplemente llenando el espacio para que parezca, al menos a primera vista, un poco más
representativo de cómo se vería en una aplicación real.<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item’s accordion body.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item’s accordion body. Let’s imagine this being filled with some actual content.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item’s accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
</div>
</div>
</div>Siempre abierto
Omite el atributo data-bs-parent en cada .accordion-collapse para
hacer que los elementos del accordion permanezcan abiertos cuando se abre otro elemento.
Este es el cuerpo del acordeón del primer
elemento. Se muestra por defecto, hasta que el plugin collapse añade las clases
apropiadas que usamos para dar estilo a cada elemento. Estas clases controlan la apariencia general,
así como la visualización y ocultación mediante transiciones CSS. Puedes modificar cualquiera de
esto con CSS personalizado o sobrescribiendo nuestras variables por defecto. También vale la pena
señalar que casi cualquier HTML puede ir dentro del
.accordion-body, aunque la
transición sí limita el desbordamiento.Este es el cuerpo del acordeón del segundo
elemento. Está oculto por defecto, hasta que el plugin collapse añade las clases
apropiadas que usamos para dar estilo a cada elemento. Estas clases controlan la apariencia general,
así como la visualización y ocultación mediante transiciones CSS. Puedes modificar cualquiera de
esto con CSS personalizado o sobrescribiendo nuestras variables por defecto. También vale la pena
señalar que casi cualquier HTML puede ir dentro del
.accordion-body, aunque la
transición sí limita el desbordamiento.Este es el cuerpo del acordeón del tercer
elemento. Está oculto por defecto, hasta que el plugin collapse añade las clases
apropiadas que usamos para dar estilo a cada elemento. Estas clases controlan la apariencia general,
así como la visualización y ocultación mediante transiciones CSS. Puedes modificar cualquiera de
esto con CSS personalizado o sobrescribiendo nuestras variables por defecto. También vale la pena
señalar que casi cualquier HTML puede ir dentro del
.accordion-body, aunque la
transición sí limita el desbordamiento.<div class="accordion" id="accordionPanelsStayOpenExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show">
<div class="accordion-body">
<strong>This is the first item’s accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse">
<div class="accordion-body">
<strong>This is the second item’s accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse">
<div class="accordion-body">
<strong>This is the third item’s accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>Accesibilidad
Por favor lee la sección de accesibilidad de collapse para más información.
CSS
Variables
Añadido en v5.2.0Como parte del enfoque evolutivo de variables CSS de Bootstrap, los acordeones ahora usan
variables CSS locales en .accordion para una personalización en tiempo real mejorada. Los valores
de las variables CSS se establecen vía Sass, por lo que la personalización con Sass también sigue siendo
compatible.
--#{$prefix}accordion-color: #{$accordion-color};
--#{$prefix}accordion-bg: #{$accordion-bg};
--#{$prefix}accordion-transition: #{$accordion-transition};
--#{$prefix}accordion-border-color: #{$accordion-border-color};
--#{$prefix}accordion-border-width: #{$accordion-border-width};
--#{$prefix}accordion-border-radius: #{$accordion-border-radius};
--#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
--#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
--#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
--#{$prefix}accordion-btn-color: #{$accordion-button-color};
--#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
--#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
--#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
--#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
--#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
--#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
--#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
--#{$prefix}accordion-active-color: #{$accordion-button-active-color};
--#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
Variables Sass
$accordion-padding-y: 1rem;
$accordion-padding-x: 1.25rem;
$accordion-color: var(--#{$prefix}body-color);
$accordion-bg: var(--#{$prefix}body-bg);
$accordion-border-width: var(--#{$prefix}border-width);
$accordion-border-color: var(--#{$prefix}border-color);
$accordion-border-radius: var(--#{$prefix}border-radius);
$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width);
$accordion-body-padding-y: $accordion-padding-y;
$accordion-body-padding-x: $accordion-padding-x;
$accordion-button-padding-y: $accordion-padding-y;
$accordion-button-padding-x: $accordion-padding-x;
$accordion-button-color: var(--#{$prefix}body-color);
$accordion-button-bg: var(--#{$prefix}accordion-bg);
$accordion-transition: $btn-transition, border-radius .15s ease;
$accordion-button-active-bg: var(--#{$prefix}primary-bg-subtle);
$accordion-button-active-color: var(--#{$prefix}primary-text-emphasis);
// fusv-disable
$accordion-button-focus-border-color: $input-focus-border-color; // Deprecated in v5.3.3
// fusv-enable
$accordion-button-focus-box-shadow: $btn-focus-box-shadow;
$accordion-icon-width: 1.25rem;
$accordion-icon-color: $body-color;
$accordion-icon-active-color: $primary-text-emphasis;
$accordion-icon-transition: transform .2s ease-in-out;
$accordion-icon-transform: rotate(-180deg);
$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>");
$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-active-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>");
Uso
El plugin collapse utiliza algunas clases para hacer el trabajo pesado:
.collapseoculta el contenido.collapse.showmuestra el contenido.collapsingse añade cuando comienza la transición y se elimina cuando termina
Estas clases se pueden encontrar en _transitions.scss.
Vía atributos data
Solo añade data-bs-toggle="collapse" y un 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 collapse. 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 gestión de grupo de acordeón a un área plegable, añade el atributo data
data-bs-parent="#selector".
Vía JavaScript
Habilita manualmente con:
const accordionCollapseElementList = document.querySelectorAll('#myAccordion .collapse')
const accordionCollapseList = [...accordionCollapseElementList].map(accordionCollapseEl => new bootstrap.Collapse(accordionCollapseEl))
Opciones
Como las opciones se pueden pasar vía atributos data o JavaScript, puedes añadir un nombre
de opción a data-bs-, como en data-bs-animation="{value}". Asegúrate de cambiar el
tipo de capitalización del nombre de la opción de “camelCase” a “kebab-case” al pasar las
opciones vía atributos data. Por ejemplo, usa data-bs-custom-class="beautifier" en lugar de
data-bs-customClass="beautifier".
A partir de Bootstrap 5.2.0, todos los componentes soportan un atributo data reservado
experimental data-bs-config que puede albergar una configuración simple del
componente como una cadena JSON. Cuando un elemento tiene los atributos
data-bs-config='{"delay":0, "title":123}' y data-bs-title="456", el valor final de
title será 456 y los atributos data separados sobrescribirán los valores dados en
data-bs-config. Además, los atributos data existentes pueden albergar valores JSON como
data-bs-delay='{"show":0,"hide":150}'.
El objeto de configuración final es el resultado de combinar data-bs-config,
data-bs-, y el objeto js, donde el último par clave-valor dado sobrescribe a los
demás.
| Nombre | Tipo | Predeterminado | Descripción |
|---|---|---|---|
parent |
selector, elemento DOM | null |
Si se proporciona un parent, entonces todos los elementos colapsables bajo el
parent especificado se cerrarán cuando se muestre este elemento colapsable. (similar al comportamiento
tradicional de un acordeón — esto depende de la clase card). El atributo debe
establecerse en el área colapsable objetivo. |
toggle |
boolean | true |
Alterna el elemento colapsable al invocarse. |
Métodos
Todos los métodos de la API son asíncronos e inician una transición. Vuelven al llamador tan pronto como la transición comienza, pero antes de que termine. Además, una llamada a un método en un componente en transición será ignorada. Obtén más información en nuestra documentación de JavaScript.
Activa tu contenido como un elemento colapsable. Acepta un object de opciones
opcional.
Puedes crear una instancia de collapse con el constructor, por ejemplo:
const bsCollapse = new bootstrap.Collapse('#myCollapse', {
toggle: false
})
| Método | Descripción |
|---|---|
dispose |
Destruye el collapse de un elemento. (Elimina los datos almacenados en el elemento DOM) |
getInstance |
Método estático que te permite obtener la instancia de collapse asociada a un
elemento DOM, puedes usarlo así: bootstrap.Collapse.getInstance(element). |
getOrCreateInstance |
Método estático que devuelve una instancia de collapse asociada a un elemento DOM
o crea una nueva en caso de que no haya sido inicializada. Puedes usarlo así:
bootstrap.Collapse.getOrCreateInstance(element). |
hide |
Oculta un elemento colapsable. Vuelve al llamador antes de que el elemento
colapsable se haya ocultado realmente (ej., antes de que ocurra el evento
hidden.bs.collapse). |
show |
Muestra un elemento colapsable. Vuelve al llamador antes de que el
elemento colapsable se haya mostrado realmente (ej., antes de que ocurra el evento
shown.bs.collapse). |
toggle |
Alterna un elemento colapsable para mostrarlo u ocultarlo. Vuelve al
llamador antes de que el elemento colapsable se haya mostrado u ocultado realmente (es
decir, antes de que ocurra el evento shown.bs.collapse o
hidden.bs.collapse). |
Eventos
La clase collapse de Bootstrap expone algunos eventos para conectarse a la funcionalidad del collapse.
| Tipo de evento | Descripción |
|---|---|
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 se ha ocultado del usuario (esperará a que se completen las transiciones CSS). |
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 collapse se ha hecho visible al usuario (esperará a que se completen las transiciones CSS). |
const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
// do something...
})