Colapsar

Cómo funciona

El complemento JavaScript de colapso se utiliza para mostrar y ocultar contenido. Los botones o anclas se utilizan como disparadores que se asignan a elementos específicos que alterna. Al contraer un elemento, se animará heightdesde su valor actual hasta 0. Dada la forma en que CSS maneja las animaciones, no se puede usar paddingen un .collapseelemento. En su lugar, utilice la clase como un elemento envolvente independiente.

Ejemplo

Haga clic en los botones de abajo para mostrar y ocultar otro elemento a través de cambios de clase:

• .collapseoculta contenido
• .collapsingse aplica durante las transiciones
• .collapse.showmuestra contenido

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

<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 complemento de colapso también admite el colapso horizontal. Agregue la .collapse-horizontalclase de modificador para hacer la transición widthen lugar de heighty establezca a widthen el elemento secundario inmediato. Siéntase libre de escribir su 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 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 varios elementos al hacer referencia a ellos con un selector en su atributo hrefo . data-bs-targetMúltiples <button>o <a>pueden mostrar y ocultar un elemento si cada uno hace referencia a él con su atributo hrefodata-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úrese de agregar aria-expandedal 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 configuró el elemento contraíble para que se abra de forma predeterminada usando la showclase, configúrelo aria-expanded="true"en el control en su lugar. 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>), el atributorole="button"debe agregarse al elemento.

Si su elemento de control apunta a un solo elemento contraíble, es decir, el data-bs-targetatributo apunta a un idselector, debe agregar el aria-controlsatributo al elemento de control, que contiene el iddel elemento contraíble. 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.

Tenga 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 creación de ARIA ; deberá incluirlas usted mismo con JavaScript personalizado.

Hablar con descaro a

Variables

$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.scssya que se comparten entre varios 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 complemento de colapso utiliza algunas clases para manejar el trabajo pesado:

• .collapseoculta el contenido
• .collapse.showmuestra el contenido
• .collapsingse 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 agregue data-bs-toggle="collapse"y data-bs-targetal elemento para asignar automáticamente el control de uno o más elementos contraíbles. El data-bs-targetatributo acepta un selector de CSS para aplicar el colapso. Asegúrese de agregar la clase collapseal elemento contraíble. Si desea que se abra de forma predeterminada, agregue la clase adicional show.

Para agregar una administración de grupos similar a un acordeón a un área contraíble, agregue el atributo de datos data-bs-parent="#selector". Consulte la página del acordeón para obtener más información.

A través de JavaScript

Habilitar 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, puede agregar un nombre de opción a data-bs-, como en data-bs-animation="{value}". Asegúrese de cambiar el tipo de caso del nombre de la opción de " camelCase " a " kebab-case " al pasar las opciones a través de atributos de datos. Por ejemplo, use 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 reservados experimentaldata-bs-config que puede albergar una configuración de componente simple como una cadena JSON. Cuando un elemento tiene atributos data-bs-config='{"delay":0, "title":123}'y , el valor final será y los atributos de datos separados anularán los valores dados en . Además, los atributos de datos existentes pueden albergar valores JSON como .data-bs-title="456"title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

Métodos

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

Puede 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 => {
  // do something...
})