Skip to main content Skip to docs navigation
Ver en GitHub

Acordeón

Construye acordeones que se colapsan verticalmente en combinación con nuestro plugin de JavaScript Collapse.

En esta página

Cómo funciona

El acordeón utiliza collapse internamente para hacerlo colapsable.

El efecto de animación de este componente depende de la consulta de medios prefers-reduced-motion. Consulta la sección de movimiento reducido en nuestra documentación de accesibilidad.

Ejemplo

Haz clic en los acordeones a continuación para expandir o colapsar el contenido del acordeón.

Para renderizar un acordeón que esté expandido por defecto:

  • añade la clase .show al elemento .accordion-collapse.
  • quita la clase .collapsed del elemento .accordion-button y establece su atributo aria-expanded en true.

Este es el cuerpo del acordeón del primer elemento. Se muestra por defecto, hasta que el plugin de colapso añade las clases apropiadas que utilizamos para dar estilo a cada elemento. Estas clases controlan la apariencia general, así como el mostrar y ocultar mediante transiciones CSS. Puedes modificar cualquier parte de esto con CSS personalizado o anulando 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 del acordeón del segundo elemento. Está oculto por defecto, hasta que el plugin de colapso añade las clases apropiadas que utilizamos para dar estilo a cada elemento. Estas clases controlan la apariencia general, así como el mostrar y ocultar mediante transiciones CSS. Puedes modificar cualquier parte de esto con CSS personalizado o anulando 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 del acordeón del tercer elemento. Está oculto por defecto, hasta que el plugin de colapso añade las clases apropiadas que utilizamos para dar estilo a cada elemento. Estas clases controlan la apariencia general, así como el mostrar y ocultar mediante transiciones CSS. Puedes modificar cualquier parte de esto con CSS personalizado o anulando 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.
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">
        Elemento de acordeón #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>Este es el cuerpo del acordeón del primer elemento.</strong> Se muestra por defecto, hasta que el plugin de colapso añade las clases apropiadas que utilizamos para dar estilo a cada elemento. Estas clases controlan la apariencia general, así como el mostrar y ocultar mediante transiciones CSS. Puedes modificar cualquier parte de esto con CSS personalizado o anulando 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">
        Elemento de acordeón #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>Este es el cuerpo del acordeón del segundo elemento.</strong> Está oculto por defecto, hasta que el plugin de colapso añade las clases apropiadas que utilizamos para dar estilo a cada elemento. Estas clases controlan la apariencia general, así como el mostrar y ocultar mediante transiciones CSS. Puedes modificar cualquier parte de esto con CSS personalizado o anulando 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">
        Elemento de acordeón #3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>Este es el cuerpo del acordeón del tercer elemento.</strong> Está oculto por defecto, hasta que el plugin de colapso añade las clases apropiadas que utilizamos para dar estilo a cada elemento. Estas clases controlan la apariencia general, así como el mostrar y ocultar mediante transiciones CSS. Puedes modificar cualquier parte de esto con CSS personalizado o anulando 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>

Flush

Añade .accordion-flush para eliminar algunos bordes y esquinas redondeadas para renderizar los acordeones de borde a borde con su contenedor padre.

Contenido de marcador de posición para este acordeón, que tiene la intención de 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 tiene la intención de demostrar la clase .accordion-flush. Este es el cuerpo del acordeón del segundo elemento. Imaginemos que esto se llena con algún contenido real.

Contenido de marcador de posición para este acordeón, que tiene la intención de demostrar la clase .accordion-flush. Este es el cuerpo del acordeón del tercer elemento. Nada más emocionante sucede aquí en términos de contenido, solo rellenando el espacio para que se vea, al menos a primera vista, un poco más representativo de cómo se vería esto en una aplicación del mundo real.
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">
        Elemento de acordeón #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, que tiene la intención de demostrar la clase <code>.accordion-flush</code>. Este es el cuerpo del 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">
        Elemento de acordeón #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, que tiene la intención de demostrar la clase <code>.accordion-flush</code>. Este es el cuerpo del acordeón del segundo elemento. Imaginemos que esto se llena con algún 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">
        Elemento de acordeón #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, que tiene la intención de demostrar la clase <code>.accordion-flush</code>. Este es el cuerpo del acordeón del tercer elemento. Nada más emocionante sucede aquí en términos de contenido, solo rellenando el espacio para que se vea, al menos a primera vista, un poco más representativo de cómo se vería esto en una aplicación del mundo real.</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 del acordeón del primer elemento. Se muestra por defecto, hasta que el plugin de colapso añade las clases apropiadas que utilizamos para dar estilo a cada elemento. Estas clases controlan la apariencia general, así como el mostrar y ocultar mediante transiciones CSS. Puedes modificar cualquier parte de esto con CSS personalizado o anulando 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 del acordeón del segundo elemento. Está oculto por defecto, hasta que el plugin de colapso añade las clases apropiadas que utilizamos para dar estilo a cada elemento. Estas clases controlan la apariencia general, así como el mostrar y ocultar mediante transiciones CSS. Puedes modificar cualquier parte de esto con CSS personalizado o anulando 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 del acordeón del tercer elemento. Está oculto por defecto, hasta que el plugin de colapso añade las clases apropiadas que utilizamos para dar estilo a cada elemento. Estas clases controlan la apariencia general, así como el mostrar y ocultar mediante transiciones CSS. Puedes modificar cualquier parte de esto con CSS personalizado o anulando 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.
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">
        Elemento de acordeón #1
      </button>
    </h2>
    <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show">
      <div class="accordion-body">
        <strong>Este es el cuerpo del acordeón del primer elemento.</strong> Se muestra por defecto, hasta que el plugin de colapso añade las clases apropiadas que utilizamos para dar estilo a cada elemento. Estas clases controlan la apariencia general, así como el mostrar y ocultar mediante transiciones CSS. Puedes modificar cualquier parte de esto con CSS personalizado o anulando 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">
        Elemento de acordeón #2
      </button>
    </h2>
    <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse">
      <div class="accordion-body">
        <strong>Este es el cuerpo del acordeón del segundo elemento.</strong> Está oculto por defecto, hasta que el plugin de colapso añade las clases apropiadas que utilizamos para dar estilo a cada elemento. Estas clases controlan la apariencia general, así como el mostrar y ocultar mediante transiciones CSS. Puedes modificar cualquier parte de esto con CSS personalizado o anulando 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">
        Elemento de acordeón #3
      </button>
    </h2>
    <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse">
      <div class="accordion-body">
        <strong>Este es el cuerpo del acordeón del tercer elemento.</strong> Está oculto por defecto, hasta que el plugin de colapso añade las clases apropiadas que utilizamos para dar estilo a cada elemento. Estas clases controlan la apariencia general, así como el mostrar y ocultar mediante transiciones CSS. Puedes modificar cualquier parte de esto con CSS personalizado o anulando 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

Consulta la sección de accesibilidad de collapse para obtener más información.

CSS

Variables

Agregado en v5.2.0

Como parte del enfoque evolutivo de las variables CSS de Bootstrap, los acordeones ahora utilizan 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-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 de Sass

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);

// 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 manejar el trabajo pesado:

  • .collapse oculta el contenido
  • .collapse.show muestra el contenido
  • .collapsing se añade cuando comienza la transición y se elimina cuando termina

Estas clases se pueden encontrar en _transitions.scss.

Mediante atributos de datos

Simplemente 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 colapso. Asegúrate de añadir la clase collapse al elemento colapsable. Si deseas que se abra por defecto, añade la clase adicional show.

Para añadir la gestión de grupos de acordeón a un área colapsable, añade el atributo de datos data-bs-parent="#selector".

Mediante JavaScript

Actívalo manualmente con:

const accordionCollapseElementList = document.querySelectorAll('#myAccordion .collapse')
const accordionCollapseList = [...accordionCollapseElementList].map(accordionCollapseEl => new bootstrap.Collapse(accordionCollapseEl))

Opciones

Como las opciones se pueden pasar a través de atributos de datos 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 mayúsculas y minúsculas del nombre de la opción de “camelCase” a “kebab-case” al pasar las opciones a través de atributos de datos. 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 admiten un atributo de datos 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 de datos separados anularán los valores proporcionados en data-bs-config. Además, los atributos de datos existentes pueden albergar valores JSON como data-bs-delay='{"show":0,"hide":150}'.

El objeto de configuración final es el resultado fusionado de data-bs-config, data-bs- y el js object (objeto js) donde el último par clave-valor proporcionado anula a los demás.

NombreTipoPredeterminadoDescripción
parentselector, elemento DOMnullSi se proporciona un padre, todos los elementos colapsables bajo el padre especificado se cerrarán cuando se muestre este elemento colapsable. (similar al comportamiento tradicional de acordeón; esto depende de la clase card). El atributo tiene que establecerse en el área colapsable de destino.
togglebooleantrueAlterna el elemento colapsable al invocarlo.

Métodos

Todos los métodos de la API son asíncronos e inician una transición. Devuelven el control al llamador tan pronto como se inicia la transición, pero antes de que termine. Además, se ignorará cualquier llamada a un método en un componente en transició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étodoDescripción
disposeDestruye el colapso de un elemento. (Elimina los datos almacenados en el elemento DOM)
getInstanceMétodo estático que permite obtener la instancia de colapso asociada a un elemento DOM, puedes usarlo así: bootstrap.Collapse.getInstance(element).
getOrCreateInstanceMétodo estático que devuelve una instancia de colapso asociada a un elemento DOM o crea una nueva en caso de que no haya sido inicializada. Puedes usarlo así: bootstrap.Collapse.getOrCreateInstance(element).
hideOculta un elemento colapsable. Vuelve al llamador antes de que el elemento colapsable se haya ocultado realmente (por ejemplo, antes de que ocurra el evento hidden.bs.collapse).
showMuestra un elemento colapsable. Vuelve al llamador antes de que el elemento colapsable se haya mostrado realmente (por ejemplo, antes de que ocurra el evento shown.bs.collapse).
toggleAlterna un elemento colapsable a mostrado u oculto. 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 de colapso.

Tipo de eventoDescripción
hide.bs.collapseEste evento se dispara inmediatamente cuando se ha llamado al método hide.
hidden.bs.collapseEste evento se dispara cuando un elemento de colapso se ha ocultado al usuario (esperará a que se completen las transiciones CSS).
show.bs.collapseEste evento se dispara inmediatamente cuando se llama al método de instancia show.
shown.bs.collapseEste evento se dispara cuando un elemento de colapso se ha hecho visible para el usuario (esperará a que se completen las transiciones CSS).
const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // hacer algo...
})