Acordeón
Construye acordeones que se contraen verticalmente en combinación con nuestro complemento Collapse JavaScript.
😎 Esta traducción es parte del proyecto esdocu.com.
En esta página
Cómo funciona.
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
Haz clic en los acordeones a continuación para expandir/contraer el contenido del acordeón.
Este es el cuerpo de acordeón del primer elemento. 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
.accordion-body, aunque la transición limita el desbordamiento.
Este es el cuerpo de acordeón del segundo elemento. 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
.accordion-body, aunque la transición limita el desbordamiento.
Este es el cuerpo de acordeón del tercer elemento. 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
.accordion-body, aunque la transición 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
Agrega .accordion-flush para eliminar algunos bordes y esquinas redondeadas para representar los
acordeones de borde a borde con su contenedor principal.
Contenido de marcador de posición para este acordeón, cuyo objetivo es
demostrar la clase
.accordion-flush. Este es el cuerpo de acordeón del primer elemento.
Contenido de marcador de posición para este acordeón, cuyo objetivo es
demostrar la clase
.accordion-flush. Este es el cuerpo de acordeón del segundo
elemento. Imaginemos que esto está lleno de contenido real.Contenido de marcador de posición para este acordeón, cuyo objetivo es
demostrar la clase
.accordion-flush. 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 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 que los elementos
del acordeón permanezcan abiertos cuando se abre otro elemento.
Este es el cuerpo de acordeón del primer elemento. 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
.accordion-body, aunque la transición limita el desbordamiento.
Este es el cuerpo de acordeón del segundo elemento. 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
.accordion-body, aunque la transición limita el desbordamiento.
Este es el cuerpo de acordeón del tercer elemento. 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
.accordion-body, aunque la transición 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
Lee la sección de accesibilidad de collapse para obtener más información.
CSS
Variables
Agregado en v5.2.0Como 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.
--#{$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
$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>");