Collapse

¿Qué es Collapse?

El complemento JavaScript Collapse se utiliza para mostrar y ocultar contenido. Los botones o enlaces se utilizan como disparadores que se asignan a elementos específicos que alternan. Colapsar un elemento animará la height desde su valor actual hasta 0. Dada la forma en que CSS maneja las animaciones, no puedes usar padding en un elemento .collapse. En su lugar, utiliza la clase como un elemento envolvente independiente.

Ejemplo de Collapse

Haz clic en los botones de abajo 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

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

<p>
  <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">
    Algún contenido placeholder para el componente de contracción. Este panel está oculto de forma predeterminada, pero se revela cuando el usuario activa el disparador correspondiente.
  </div>
</div>

Horizontal

El complemento de Collapse también admite el colapso horizontal. Agrega la clase modificadora .collapse-horizontal para cambiar el width en lugar de 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 usar 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">
    Toggle con collapse
  </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 placeholder para un colapso horizontal. Está oculto de forma predeterminada y se muestra cuando se activa.
    </div>
  </div>
</div>

Múltiples objetivos

Un <button> o <a> puede mostrar y ocultar varios elementos al hacer referencia a ellos 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 hace referencia a él 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">Alternar el 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 el 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">
        Algún contenido placeholder para el primer componente de colapso de este ejemplo de colapso múltiple. Este panel está oculto de forma predeterminada, pero se revela cuando el usuario activa el disparador correspondiente.

      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Parte del contenido placeholder para el segundo componente de contracción de este ejemplo de contracción múltiple. Este panel está oculto de forma predeterminada, pero se revela cuando el usuario activa el disparador 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 plegable vinculado al control a los lectores de pantalla y tecnologías de asistencia similares. Si el elemento contraíble está cerrado de forma predeterminada, el atributo del elemento de control debe tener un valor de aria-expanded="false". Si configuraste el elemento contraíble para que se abra de manera predeterminada mediante la clase show, configura aria-expanded="true" en el control. El complemento alternará automáticamente este atributo en el control en función de si el elemento plegable 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 plegable). Si el elemento HTML del elemento de control no es un botón (por ejemplo, un <a> o <div>), se debes agregar el atributo role="button" al elemento.

Si tu elemento de control apunta a un solo elemento contraíble, es decir, el atributo data-bs-target apunta a un selector id, debes agregar el atributo aria-controls al elemento de control, que contiene el id del elemento plegable. Los lectores de pantalla modernos y las tecnologías de asistencia similares hacen uso de este atributo para proporcionar a los usuarios accesos directos adicionales para navegar directamente al propio elemento contraíble.

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 WAI-ARIA Authoring Practices 1.1, deberás incluirlos tú mismo con JavaScript personalizado.

Sass

Variables

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

Clases

Las clases de transición de Collapse se pueden encontrar en scss/_transitions.scss, ya que se comparten entre varios componentes (collapse y accordion).

.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 complemento Collapse 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 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 gestión de grupos similar a un acordeón a un área contraíble, agrega el atributo de datos data-bs-parent="#selector". Consulta la página de Accordion para obtener más información.

A través de JavaScript

Habilitar manualmente con:

var collapseElementList = Array.prototype.slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

Opciones

Las opciones se pueden pasar a través de atributos de datos o JavaScript. Para los atributos de datos, agrega el nombre de la opción a data-bs-, como en data-bs-parent="".

Métodos

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

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

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})

Eventos

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

var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // hacer algo...
})