Plegable básico
Los plegables son útiles cuando deseas ocultar y mostrar gran cantidad de contenido.
Ejm
<div class="container">
<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>
Ejemplo explicado
La clase .collapse indica un elemento colapsable (<div> en nuestro ejm). Este es el contenido que se mostrará u ocultará cuando hagamos click en el botón.
Para controlar (mostrar / ocultar) el contenido colapsable, añadimos el atributo data-toggle=»collapse» en una etiqueta <a> o en un elemento <button>. Después añadimos el atributo data-target=»#id» para conectar el botón con con el contenido colapsable (<div id=»demo»>).
Nota: Para los elementos <a>, puede usar el atributo href en lugar del atributo de destino de datos.
Ejm
<div class="container">
<h2>Simple Collapsible</h2>
<a href="#demo" class="btn btn-primary" data-toggle="collapse">Simple collapsible</a>
<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>
Por defecto, el contenido plegable está oculto. Sin embargo, puedes agregar la clase .show para mostrar el contenido de manera predeterminada.
Ejm
<div class="container">
<h2>Show Collapsible Content By Default</h2>
<p>Add the show class next to the collapse class to show the content by default.</p>
<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 show">
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>
Accordion
El siguiente ejemplo muestra un acordeón simple al extender el componente de la tarjeta.
Nota: Usa el atributo primario de datos para asegurarte de que todos los elementos plegables debajo del primario especificado se cerrarán cuando se muestre uno de los elementos plegables.
<div class="container">
<h2>Accordion Example</h2>
<p><strong>Note:</strong> The <strong>data-parent</strong> attribute
makes sure that all collapsible elements under the specified
parent will be closed when one of the collapsible item is shown.</p>
<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 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>
</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 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>
</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 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>
</div>
</div>
</div>