El componente Acordeón de Bootstrap
Construye acordeones que se contraen verticalmente en combinación con nuestro complemento Collapse JavaScript.
Cómo funciona el componente Acordeón
El acordeón usa collapse internamente para hacerlo plegable. Para representar un acordeón expandido, agrega la clase .open en .accordion.
ℹ️
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 del componente Acordeón
Haz clic en los acordeones a continuación para expandir/contraer el contenido del acordeón.
HTML
<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">
Acordeón Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>Este es el cuerpo de acordeón del primer elemento.</strong> Se muestra de forma
predeterminada, hasta que el complemento collapse agrega las clases apropiadas que usamos para
diseñar cada elemento. Estas clases controlan la apariencia general, así como mostrar y ocultar
mediante transiciones CSS. Puedes modificar todo esto con CSS personalizado o sobrescribendo
nuestras variables predeterminadas. También vale la pena señalar que casi cualquier HTML puede
ir dentro de <code>.accordion-body</code>, aunque la transición limita el desbordamiento.
</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">
Acordeón Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>Este es el cuerpo de acordeón del segundo elemento.</strong> Está oculto de forma
predeterminada, hasta que el complemento collapse agrega las clases apropiadas que usamos para
diseñar cada elemento. Estas clases controlan la apariencia general, así como mostrar y ocultar
mediante transiciones CSS. Puedes modificar todo esto con CSS personalizado o sobrescribendo
nuestras variables predeterminadas. También vale la pena señalar que casi cualquier HTML puede
ir dentro de <code>.accordion-body</code>, aunque la transición limita el desbordamiento.
</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">
Acordeón Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>Este es el cuerpo de acordeón del tercer elemento.</strong> Está oculto de forma
predeterminada, hasta que el complemento collapse agrega las clases apropiadas que usamos para
diseñar cada elemento. Estas clases controlan la apariencia general, así como mostrar y ocultar
mediante transiciones CSS. Puedes modificar todo esto con CSS personalizado o sobrescribendo
nuestras variables predeterminadas. También vale la pena señalar que casi cualquier HTML puede
ir dentro de <code>.accordion-body</code>, aunque la transición limita el desbordamiento.
</div>
</div>
</div>
</div>Las clases Flush
Agrega .accordion-flush para eliminar algunos bordes y esquinas redondeadas para representar los acordeones de borde a borde con su contenedor principal.
HTML
<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">
Acordeón Item #1
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
Contenido de marcador de posición para este acordeón, cuyo objetivo es demostrar la clase <code>.accordion-flush</code>. Este es el cuerpo de acordeón del primer elemento.
</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">
Acordeón Item #2
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
Contenido de marcador de posición para este acordeón, cuyo objetivo es
demostrar la clase <code>.accordion-flush</code>. Este es el cuerpo de acordeón del segundo
elemento. Imaginemos que esto está lleno de contenido real.
</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">
Acordeón Item #3
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Contenido de marcador de posición para este acordeón, cuyo objetivo es
demostrar la clase <code>.accordion-flush</code>. Este es el cuerpo de acordeón del tercer
elemento. Aquí no sucede nada más interesante en términos de contenido, sino simplemente llenar
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 del mundo real.</div>
</div>
</div>
</div>Acordeón siempre abierto
Omite el atributo data-bs-parent en cada .accordion-collapse para que los elementos del acordeón permanezcan abiertos cuando se abre otro elemento.
HTML
<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">
Acordeón Item #1
</button>
</h2>
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show">
<div class="accordion-body">
<strong>Este es el cuerpo de acordeón del primer elemento.</strong> Se muestra de forma
predeterminada, hasta que el complemento collapse agrega las clases apropiadas que usamos para
diseñar cada elemento. Estas clases controlan la apariencia general, así como mostrar y ocultar
mediante transiciones CSS. Puedes modificar todo esto con CSS personalizado o sobrescribendo
nuestras variables predeterminadas. También vale la pena señalar que casi cualquier HTML puede
ir dentro de <code>.accordion-body</code>, aunque la transición limita el desbordamiento.
</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">
Acordeón Item #2
</button>
</h2>
<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse">
<div class="accordion-body">
<strong>Este es el cuerpo de acordeón del segundo elemento.</strong> Está oculto de forma
predeterminada, hasta que el complemento collapse agrega las clases apropiadas que usamos para
diseñar cada elemento. Estas clases controlan la apariencia general, así como mostrar y ocultar
mediante transiciones CSS. Puedes modificar todo esto con CSS personalizado o sobrescribendo
nuestras variables predeterminadas. También vale la pena señalar que casi cualquier HTML puede
ir dentro de <code>.accordion-body</code>, aunque la transición limita el desbordamiento.
</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">
Acordeón Item #3
</button>
</h2>
<div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse">
<div class="accordion-body">
<strong>Este es el cuerpo de acordeón del tercer elemento.</strong> Está oculto de forma
predeterminada, hasta que el complemento collapse agrega las clases apropiadas que usamos para
diseñar cada elemento. Estas clases controlan la apariencia general, así como mostrar y ocultar
mediante transiciones CSS. Puedes modificar todo esto con CSS personalizado o sobrescribendo
nuestras variables predeterminadas. También vale la pena señalar que casi cualquier HTML puede
ir dentro de <code>.accordion-body</code>, aunque la transición limita el desbordamiento.
</div>
</div>
</div>
</div>Accesibilidad del componente Acordeón
Lee la sección de accesibilidad de collapse para obtener más información.
Personalización del CSS del componente
Variables Sass del componente Acordeón
Agregado en v5.2.0
Como parte del enfoque de variables CSS en evolución de Bootstrap, los acordeones ahora usan variables CSS locales en .accordion para una personalización mejorada en tiempo real. Los valores de las variables CSS se establecen a través de Sass, por lo que la personalización de Sass también es compatible.
scss/_accordion.scss
--#{$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-border-color: #{$accordion-button-focus-border-color};
--#{$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 generales relacionadas
scss/_variables.scss
$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);
$accordion-button-focus-border-color: $input-focus-border-color;
$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='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");Última actualización