Bootstrap 4 Colapso
Básico Plegable
Los plegables son útiles cuando desea ocultar y mostrar una gran cantidad de contenido:
Ejemplo
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Ejemplo explicado
La .collapseclase indica un elemento contraíble (un <div> en nuestro ejemplo); este es el contenido que se mostrará u ocultará con un clic de un botón.
Para controlar (mostrar/ocultar) el contenido contraíble, agregue el data-toggle="collapse"atributo a un elemento <a> o <button>. Luego agregue el data-target="#id"atributo para conectar el botón con el contenido contraíble (<div id="demo">).
Nota: para los elementos <a>, puede usar el hrefatributo en lugar del data-target
atributo:
Ejemplo
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
De forma predeterminada, el contenido contraíble está oculto. Sin embargo, puede agregar la .showclase para mostrar el contenido de forma predeterminada:
Ejemplo
<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>
Acordeón
El siguiente ejemplo muestra un acordeón simple al extender el componente de la tarjeta.
Nota: Utilice el data-parentatributo para asegurarse de que todos los elementos contraíbles bajo el padre especificado se cerrarán cuando se muestre uno de los elementos contraíbles.
Ejemplo
<div id="accordion">
<div class="card">
<div
class="card-header">
<a class="card-link"
data-toggle="collapse" href="#collapseOne">
Collapsible
Group Item #1
</a>
</div>
<div id="collapseOne" class="collapse show"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
<div class="card">
<div
class="card-header">
<a class="collapsed card-link"
data-toggle="collapse" href="#collapseTwo">
Collapsible
Group Item #2
</a>
</div>
<div id="collapseTwo" class="collapse"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
<div class="card">
<div
class="card-header">
<a class="collapsed card-link"
data-toggle="collapse" href="#collapseThree">
Collapsible
Group Item #3
</a>
</div>
<div id="collapseThree" class="collapse"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
</div>
Complete Bootstrap 4 Contraer referencia
Para obtener una referencia completa de todas las opciones, métodos y eventos de contracción, vaya a nuestra Referencia de contracción de Bootstrap 4 JS .