Colapso

Cómo funciona

El plugin de JavaScript de colapso se utiliza para mostrar y ocultar contenido. Se utilizan botones o anclas como desencadenadores (triggers) que se asignan a elementos específicos que alternas. Colapsar un elemento animará la altura (height) desde su valor actual a 0. Debido a cómo CSS maneja las animaciones, no puedes usar espaciado (padding) en un elemento .collapse. En su lugar, usa la clase como un elemento contenedor independiente.

Ejemplo

Haz clic en los botones a continuación para mostrar y ocultar otro elemento a través de cambios de clase:

• .collapse oculta el contenido
• .collapsing se aplica durante las transiciones
• .collapse.show muestra el contenido

En general, recomendamos usar un <button> con el atributo data-bs-target. Aunque no se recomienda desde un punto de vista semántico, también puedes usar un enlace <a> con el atributo href (y un role="button"). En ambos casos, se requiere el atributo data-bs-toggle="collapse".

<p class="d-inline-flex gap-1">
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Enlace con href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Botón con data-bs-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Contenido de marcador de posición para el componente de colapso. Este panel está oculto por defecto, pero se muestra cuando el usuario activa el desencadenador correspondiente.
  </div>
</div>

Horizontal

El plugin de colapso admite el colapso horizontal. Agrega la clase modificadora .collapse-horizontal para realizar la transición del ancho (width) en lugar de la altura (height) y establece un width en el elemento secundario inmediato. Siéntete libre de escribir tu propio Sass personalizado, usar estilos en línea o utilizar nuestras utilidades de ancho.

<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Alternar colapso de ancho
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      Este es un contenido de marcador de posición para un colapso horizontal. Está oculto por defecto y se muestra cuando se activa.
    </div>
  </div>
</div>

Múltiples activadores y objetivos

Un elemento <button> o <a> puede mostrar y ocultar múltiples elementos al hacerles referencia con un selector en su atributo data-bs-target o href. Por el contrario, múltiples elementos <button> o <a> pueden mostrar y ocultar el mismo elemento si cada uno hace referencia a él con su atributo data-bs-target o href.

<p class="d-inline-flex gap-1">
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Alternar primer elemento</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Alternar segundo elemento</button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Alternar ambos elementos</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Contenido de marcador de posición para el primer componente de colapso de este ejemplo de colapso múltiple. Este panel está oculto por defecto, pero se muestra cuando el usuario activa el desencadenador correspondiente.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Contenido de marcador de posición para el segundo componente de colapso de este ejemplo de colapso múltiple. Este panel está oculto por defecto, pero se muestra cuando el usuario activa el desencadenador correspondiente.
      </div>
    </div>
  </div>
</div>

Accesibilidad

Asegúrate de agregar aria-expanded al elemento de control. Este atributo transmite explícitamente el estado actual del elemento colapsable vinculado al control a lectores de pantalla y tecnologías de asistencia similares. Si el elemento colapsable está cerrado por defecto, el atributo en el elemento de control debe tener un valor de aria-expanded="false". Si has configurado el elemento colapsable para que esté abierto por defecto utilizando la clase show, establece aria-expanded="true" en el control en su lugar. El plugin alternará automáticamente este atributo en el control según si el elemento colapsable 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 colapsable). Si el elemento HTML del elemento de control no es un botón (e.g., un <a> o <div>), el atributo role="button" debe agregarse al elemento.

Si tu elemento de control apunta a un solo elemento colapsable (es decir, el atributo data-bs-target apunta a un selector id), debes agregar el atributo aria-controls al elemento de control, que contenga el id del elemento colapsable. Los lectores de pantalla modernos y tecnologías de asistencia similares utilizan este atributo para proporcionar a los usuarios accesos directos adicionales para navegar directamente al elemento colapsable en sí.

Ten en cuenta que la implementación actual de Bootstrap no cubre las diversas interacciones de teclado opcionales descritas en el patrón de acordeón de la Guía de Prácticas de Autoría de ARIA; deberás incluirlas tú mismo con JavaScript personalizado.

CSS

Variables de Sass

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

Clases

Las clases de transición de colapso se pueden encontrar en scss/_transitions.scss, ya que se comparten entre múltiples componentes (colapso y acordeón).

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);

  &.collapse-horizontal {
    width: 0;
    height: auto;
    @include transition($transition-collapse-width);
  }
}

Uso

El plugin de colapso utiliza algunas clases para manejar el trabajo pesado:

• .collapse oculta el contenido
• .collapse.show muestra el contenido
• .collapsing se agrega cuando comienza la transición y se elimina cuando finaliza

Estas clases se pueden encontrar en _transitions.scss.

A través de atributos de datos

Simplemente agrega 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 agregar la clase collapse al elemento colapsable. Si deseas que se abra por defecto, agrega la clase adicional show.

Para agregar una administración de grupo similar a un acordeón a un área colapsable, agrega el atributo de datos data-bs-parent="#selector". Consulta la página de acordeón para obtener más información.

A través de JavaScript

Habilítalo manualmente con:

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

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.

Métodos

Activa tu contenido como un elemento colapsable. Acepta un object de opciones opcional.

Puedes crear una instancia de colapso con el constructor, por ejemplo:

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

Eventos

La clase de colapso de Bootstrap expone algunos eventos para conectarse a la funcionalidad de colapso.

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // hacer algo...
})