Colapsar

Cómo funciona

O complemento de contraer JavaScript úsase para mostrar e ocultar contido. Os botóns ou áncoras utilízanse como disparadores que se asignan a elementos específicos que alternas. Ao contraer un elemento animarase heightdesde o seu valor actual ata 0. Dado como CSS manexa as animacións, non se pode usar paddingnun .collapseelemento. En vez diso, use a clase como un elemento de envoltura independente.

Exemplo

Fai clic nos botóns seguintes para mostrar e ocultar outro elemento mediante os cambios de clase:

• .collapseoculta o contido
• .collapsingaplícase durante as transicións
• .collapse.showmostra o contido

En xeral, recomendamos usar un botón co data-bs-targetatributo. Aínda que non se recomenda desde un punto de vista semántico, tamén podes usar unha ligazón co hrefatributo (e un role="button"). En ambos os casos, data-bs-toggle="collapse"é necesario.

<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

O complemento de colapso tamén admite o colapso horizontal. Engade a .collapse-horizontalclase modificadora para facer a transición no widthlugar de heighte establece a widthno elemento fillo inmediato. Non dubides en escribir o teu propio Sass personalizado, usar estilos en liña ou usar as nosas 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 obxectivos

A <button>ou <a>pode mostrar e ocultar varios elementos facendo referencia a eles cun selector no seu atributo hrefou . data-bs-targetMultiple <button>ou <a>pode mostrar e ocultar un elemento se cada un o fai referencia co seu atributo hrefoudata-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>

Accesibilidade

Asegúrese de engadir aria-expandedao elemento de control. Este atributo transmite de forma explícita o estado actual do elemento plegable vinculado ao control aos lectores de pantalla e tecnoloxías auxiliares similares. Se o elemento plegable está pechado por defecto, o atributo do elemento de control debería ter un valor de aria-expanded="false". Se configuraches o elemento plegable para que estea aberto de forma predeterminada usando a showclase, configura aria-expanded="true"o control. O complemento activará automaticamente este atributo no control segundo se abriu ou non o elemento contraíble (a través de JavaScript ou porque o usuario disparou outro elemento de control tamén ligado ao mesmo elemento contraíble). Se o elemento HTML do elemento de control non é un botón (por exemplo, un <a>ou <div>), o atributorole="button"debe engadirse ao elemento.

Se o teu elemento de control está dirixido a un único elemento contraíble, é dicir, o data-bs-targetatributo apunta a un idselector, deberías engadir o aria-controlsatributo ao elemento de control, que contén o idelemento do elemento contraíble. Os lectores de pantalla modernos e tecnoloxías de asistencia similares fan uso deste atributo para ofrecer aos usuarios atallos adicionais para navegar directamente ao propio elemento plegable.

Teña en conta que a implementación actual de Bootstrap non cobre as diversas interaccións opcionais do teclado descritas no patrón de acordeón da Guía de prácticas de creación de ARIA ; terá que incluílas vostede mesmo con JavaScript personalizado.

Sass

Variables

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

Clases

Pódense atopar clases de transición scss/_transitions.scssde contraer xa que se comparten entre varios compoñentes (contraer e 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

O complemento de colapso utiliza algunhas clases para xestionar o traballo pesado:

• .collapseoculta o contido
• .collapse.showmostra o contido
• .collapsingengádese cando comeza a transición e elimínase cando remata

Estas clases pódense atopar en _transitions.scss.

A través de atributos de datos

Só ten que engadir data-bs-toggle="collapse"e data-bs-targeta ao elemento para asignar automaticamente o control dun ou máis elementos plegables. O data-bs-targetatributo acepta un selector CSS ao que aplicar o contraer. Asegúrate de engadir a clase collapseao elemento contraíble. Se queres que se abra por defecto, engade a clase adicional show.

Para engadir unha xestión de grupos de tipo acordeón a unha área plegable, engade o atributo de datos data-bs-parent="#selector". Consulta a páxina do acordeón para obter máis información.

Vía JavaScript

Habilitar manualmente con:

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

Opcións

Como as opcións se poden pasar a través de atributos de datos ou JavaScript, pode engadir un nome de opción a data-bs-, como en data-bs-animation="{value}". Asegúrate de cambiar o tipo de maiúsculas e minúsculas do nome da opción de " camelCase " a " kebab-case " ao pasar as opcións a través dos atributos de datos. Por exemplo, use data-bs-custom-class="beautifier"no canto de data-bs-customClass="beautifier".

A partir de Bootstrap 5.2.0, todos os compoñentes admiten un atributo de datos reservados experimentaisdata-bs-config que pode albergar unha configuración sinxela de compoñentes como cadea JSON. Cando un elemento ten data-bs-config='{"delay":0, "title":123}'e data-bs-title="456"atributos, o titlevalor final será 456e os atributos de datos separados anularán os valores indicados en data-bs-config. Ademais, os atributos de datos existentes poden albergar valores JSON como data-bs-delay='{"show":0,"hide":150}'.

Métodos

Activa o teu contido como elemento plegable. Acepta opcións opcionais object.

Podes crear unha instancia de colapso co construtor, por exemplo:

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

Eventos

A clase de colapso de Bootstrap expón algúns eventos para conectarse á funcionalidade de colapso.

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