Collapse

<< Carousel Desplegables >>

Este componente nos permite mostrar/ocultar otro elemento html, para ello las clases que disponemos son: 

  • .collapse: oculta el contenido
  • .collapsing: se aplica durante las transiciones
  • .collapse.show muestra el contenido

Podemos usar un enlace con el atributo href o un botón con el data-target, en ambos casos el atributo data-toggle=”collapse” es obligatorio

<p class="d-inline-flex gap-1">
  <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>

<< Carousel Desplegables >>