Colapsar

Alterna a visibilidade do contido no teu proxecto con algunhas clases e os nosos complementos de JavaScript.

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 xestiona 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-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-toggle="collapse"é necesario.

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-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 .widthclase 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-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse width" id="collapseWidthExample">
    <div class="card card-body" style="width: 320px;">
      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 JQuery no seu atributo hrefou . data-targetMúltiples <button>ou <a>poden mostrar e ocultar un elemento se cada un o fai referencia co seu atributo hrefoudata-target

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-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>

Exemplo de acordeón

Usando o compoñente tarxeta , pode ampliar o comportamento de contraer predeterminado para crear un acordeón. Para lograr correctamente o estilo de acordeón, asegúrate de usalo .accordioncomo envoltorio.

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the second accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
      </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-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 do teclado descritas no patrón de acordeón da Guía de prácticas de autor de ARIA ; terá que incluílas vostede mesmo con JavaScript personalizado.

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-toggle="collapse"e data-targeta ao elemento para asignar automaticamente o control dun ou máis elementos plegables. O data-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-parent="#selector". Consulta a demostración para ver isto en acción.

Vía JavaScript

Habilitar manualmente con:

$('.collapse').collapse()

Opcións

As opcións pódense pasar a través de atributos de datos ou JavaScript. Para os atributos de datos, engada o nome da opción a data-, como en data-parent="".

Métodos

.collapse(options)

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

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Alterna un elemento plegable para mostrar ou ocultar. Regresa ao interlocutor antes de que se amosase ou escondese o elemento plegable (é dicir, antes de que se produza o evento shown.bs.collapseou ).hidden.bs.collapse

.collapse('show')

Mostra un elemento plegable. Volve ao interlocutor antes de que se amosara realmente o elemento plegable (é dicir, antes de shown.bs.collapseque se produza o evento).

.collapse('hide')

Oculta un elemento plegable. Volve ao interlocutor antes de que o elemento plegable se escondese (é dicir, antes de hidden.bs.collapseque se produza o evento).

.collapse('dispose')

Destrúe o colapso dun elemento.

Eventos

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

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})