Collapse

Cómo funciona

El plugin de JavaScript collapse se usa para mostrar y ocultar contenido. Los botones o anclas se usan como disparadores que se mapean a elementos específicos que alternas. Contraer un elemento animará el height desde su valor actual a 0. Dado cómo maneja CSS las animaciones, no puedes usar 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 mediante cambios de clase:

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

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

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

Horizontal

El plugin de collapse también soporta el colapso horizontal. Añade la clase modificadora .collapse-horizontal para transicionar el width en lugar del height y establece un width en el elemento hijo inmediato. Siéntete libre de escribir tu propio Sass personalizado, usar estilos inline, o usar nuestras utilidades de width.

<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </div>
</div>

Múltiples objetivos

Un <button> o <a> puede mostrar y ocultar múltiples elementos referenciándolos con un selector en su atributo href o data-bs-target. Múltiples <button> o <a> pueden mostrar y ocultar un elemento si cada uno lo referencia con su atributo href o data-bs-target

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
</div>

Accesibilidad

Asegúrate de añadir aria-expanded al elemento de control. Este atributo transmite explícitamente el estado actual del elemento colapsable vinculado al control a los 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 usando 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 (vía 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 (ej., un <a> o <div>), se debe añadir el atributo role="button" al elemento.

Si tu elemento de control está apuntando a un único elemento colapsable —es decir, el atributo data-bs-target apunta a un selector de id— debes añadir el atributo aria-controls al elemento de control, conteniendo el id del elemento colapsable. Los lectores de pantalla modernos y tecnologías de asistencia similares utilizan este atributo para proporcionar a los usuarios atajos adicionales para navegar directamente al elemento colapsable.

Ten en cuenta que la implementación actual de Bootstrap no cubre las diversas opcionales interacciones de teclado descritas en el ARIA Authoring Practices Guide accordion pattern - tendrás que incluirlas tú mismo con JavaScript personalizado.

Sass

Variables

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

Clases

Las clases de transición del collapse se pueden encontrar en scss/_transitions.scss ya que se comparten entre múltiples componentes (collapse 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 collapse utiliza algunas clases para hacer 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.

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 grupos tipo acordeón a un área colapsable, añade el atributo de datos data-bs-parent="#selector". Consulta la página del acordeón para más información.

Vía JavaScript

Habilita manualmente con:

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

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}'.

Métodos

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

Eventos

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

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