Colapso de arranque
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 .inclase para mostrar el contenido de forma predeterminada:
Ejemplo
<div id="demo" class="collapse in">
Lorem ipsum dolor text....
</div>
Panel plegable
El siguiente ejemplo muestra un panel contraíble:
Ejemplo
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
Grupo de lista contraíble
- One
- Two
- Three
A continuación, se muestra un panel contraíble con un grupo de listas en su interior:
Ejemplo
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
</div>
Acordeón
El siguiente ejemplo muestra un acordeón simple al extender el componente del panel.
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 class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-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="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-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="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-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>
Referencia completa de colapso de Bootstrap
Para obtener una referencia completa de todas las opciones, métodos y eventos de contracción, vaya a nuestra Referencia de contracción JS de Bootstrap .