Bootstrap 4 JS Collapse

Clases

Estas son las clases que podemos encontrar.

Clase Descripción
.collapse Oculta el contenido
.collapse show Muestra el contenido colapsable por defecto
.collapsing Se agrega cuando comienza la transición y se elimina cuando finaliza

Atributos vía data-*

Simplemente agrega data-toggle = «collapse» y data-target al elemento para asignar automáticamente el control de un elemento plegable. El atributo de destino de datos acepta un selector CSS para aplicar el colapso. Asegúrate de agregar el colapso de la clase al elemento plegable. Si deseas que se abra por defecto, agrega la clase adicional «show».

Ejm

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Simple Collapsible</h2>
  <p>Click on the button to toggle between showing and hiding content.</p>
  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

</body>
</html>

Sugerencia: Para agregar una administración de grupo similar a un acordeón a un control plegable, agregue el atributo de datos data-parent = «# selector».

Vía Javascript

Habilitar manualmente con:

$('.collapse').collapse();

Opciones collapse

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 = «».

Nombre Tipo Defecto Descripción
parent selector false Todos los elementos plegables debajo del elemento primario especificado se cerrarán cuando se muestre este elemento plegable. (similar al comportamiento tradicional del acordeón
toggle boolean true alterna el elemento plegable en la invocación

Métodos de colapso

La siguiente tabla lista todos los posibles métodos de colapso

Método Descripción
.collapse(options) Activa el elemento plegable con una opción. Ver opciones anteriores para valores válidos
.collapse(«toggle») Alterna el elemento plegable
.collapse(«show») Muestra el elemento plegable
.collapse(«hide») Oculta el elemento plegable
.collapse(«dispose») Destruye el elemento plegable

Ejm

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Collapsible Methods</h2>
  <p>The toggle method toggles the collapsible content.</p>
  <p>The show method shows the collapsible content.</p>
  <p>The hide method hides the collapsible content.</p>
  <button type="button" class="btn btn-primary">Toggle</button>
  <button type="button" class="btn btn-success">Show</button>
  <button type="button" class="btn btn-warning">Hide</button> 
    
  <div class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

<script>
$(document).ready(function(){
  $(".btn-primary").click(function(){
    $(".collapse").collapse('toggle');
  });
  $(".btn-success").click(function(){
    $(".collapse").collapse('show');
  });
  $(".btn-warning").click(function(){
    $(".collapse").collapse('hide');
  });
});
</script>

</body>
</html>

Eventos de colapso

La siguiente tabla muestra la lista disponible de eventos de colapso

Evento Descripción
show.bs.collapse Se produce cuando el elemento plegable está a punto de mostrarse
shown.bs.collapse Se produce cuando el elemento plegable se muestra completamente (después de que se hayan completado las transiciones CSS)
hide.bs.collapse Se produce cuando el elemento plegable está a punto de ocultarse
hidden.bs.collapse Se produce cuando el elemento plegable está completamente oculto (después de que se hayan completado las transiciones CSS)