básica plegable
Botes hinchables son útiles cuando se desea ocultar y mostrar gran cantidad de contenido:
Ejemplo
<button data-toggle="collapse"
data-target="#demo">Collapsible</button>
<div id="demo"
class="collapse">
Lorem ipsum dolor text....
</div> Inténtalo tú mismo " ejemplo Explicación
El .collapse clase indica un elemento plegable (un <div> en nuestro ejemplo); este es el contenido que se muestra o se oculta con un clic de un botón.
Para controlar (mostrar / ocultar) el contenido plegable, agregar la data-toggle="collapse" atributo a un <a> o un <button> elemento. A continuación, añadir el data-target="#id" atributo para conectar el botón con el contenido plegable (<div id="demo">) .
Nota: Para <a> elementos, se puede utilizar el href atributo en lugar de la data-target de atributos:
Ejemplo
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo"
class="collapse">
Lorem ipsum dolor text....
</div> Inténtalo tú mismo " De manera predeterminada, el contenido es plegable oculto. Sin embargo, se puede añadir el .in clase para mostrar el contenido de forma predeterminada:
panel que puede contraerse
El siguiente ejemplo muestra un panel desplegable:
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> Inténtalo tú mismo " Colapsable Grupo Lista
- Uno
- Dos
- Tres
A continuación se muestra un panel plegable con un grupo dentro de la lista:
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> Inténtalo tú mismo " Acordeón
El siguiente ejemplo muestra un acordeón sencilla mediante la ampliación del componente de panel.
Nota: Utilice el data-parent de atributos para asegurarse de que todos los elementos plegables bajo la matriz especificada se cerrarán cuando se muestra uno de los elementos plegables.
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> Inténtalo tú mismo " Completa Bootstrap Colapso de referencia
Para una referencia completa de todas las opciones de colapso, métodos y eventos, visite nuestro Bootstrap Reducir referencia JS .