Colapsar

Alterne la visibilidad del contenido en su proyecto con algunas clases y nuestros complementos de JavaScript.

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-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-toggle="collapse"se requiere el.

<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

El complemento de colapso también admite el colapso horizontal. Agregue la .widthclase 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-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 objetivos

Un <button>or <a>puede mostrar y ocultar varios elementos al hacer referencia a ellos con un selector de JQuery en su atributo hrefor . data-targetMúltiples <button>o <a>pueden mostrar y ocultar un elemento si cada uno hace referencia a él con su atributo hrefodata-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>

Ejemplo de acordeón

Con el componente de tarjeta , puede ampliar el comportamiento de contracción predeterminado para crear un acordeón. Para lograr correctamente el estilo de acordeón, asegúrese de usarlo .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>

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-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 del teclado 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.

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-toggle="collapse"y data-targetal elemento para asignar automáticamente el control de uno o más elementos contraíbles. El data-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-parent="#selector". Consulte la demostración para ver esto en acción.

A través de JavaScript

Habilitar manualmente con:

$('.collapse').collapse()

Opciones

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

Métodos

.collapse(options)

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

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

.collapse('toggle')

Cambia un elemento colapsable a mostrado u oculto. Vuelve a la persona que llama antes de que el elemento contraíble se haya mostrado u ocultado (es decir, antes de que ocurra el evento shown.bs.collapseo ).hidden.bs.collapse

.collapse('show')

Muestra un elemento plegable. Vuelve a la persona que llama antes de que se haya mostrado realmente el elemento colapsable (es decir, antes de shown.bs.collapseque ocurra el evento).

.collapse('hide')

Oculta un elemento contraíble. Vuelve a la persona que llama antes de que el elemento contraíble se haya ocultado (es decir, antes de hidden.bs.collapseque ocurra el evento).

.collapse('dispose')

Destruye el colapso de un elemento.

Eventos

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

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