JS Collapse (collapse.js)
Obtener estilos de base y soporte flexible para componentes plegables como acordeones y de navegación.
dependencia plugin: Reducir las transiciones requiere plugin para ser incluido en su versión de Bootstrap.
Para ver un tutorial sobre botes hinchables, lea nuestra Bootstrap Collapse Tutorial .
The Collapse Plugin Classes
| Clase | Descripción | Ejemplo |
|---|---|---|
| .collapse | Oculta el contenido | Intentalo |
| .collapse in | Muestra el contenido | Intentalo |
| .collapsing | Añadido cuando la transición se inicia, y se retira cuando termina | Intentalo |
Via data-* Atributos
Sólo tiene que añadir data-toggle="collapse" y un destino de los datos de elemento para asignar automáticamente control de un elemento plegable. El atributo de destino de los datos acepta un selector CSS para aplicar el colapso de. Asegúrese de añadir el colapso de clase al elemento plegable. Si desea que por defecto abierto, agregue la clase adicional en.
Ejemplo
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
Inténtalo tú mismo " Sugerencia: Para agregar gestión de grupos de acordeón a un control plegable, añadir el atributo de datos data-parent="#selector" .
a través de JavaScript
Habilitar manualmente con:
$('.collapse').collapse()Opciones de colapso
Las opciones pueden ser transmitidos a través de los atributos de datos o JavaScript. Para los atributos, al añadir el nombre de opción de de datos, como en la data-parent="" .
| Nombre | Tipo | Defecto | Descripción |
|---|---|---|---|
| parent | selector | false | Todos los elementos plegables bajo la matriz especificada se cerrarán cuando se muestra este elemento plegable. (Similar al comportamiento tradicional de acordeón - esto depende de la clase Panel) - Véase el ejemplo siguiente |
| toggle | boolean | true | Alterna el elemento plegable de la invocación |
Métodos de colapso
En la siguiente tabla se enumeran los métodos Cerrar todos los disponibles.
| Método | Descripción | Intentalo |
|---|---|---|
| .collapse( options ) | Activa el elemento plegable con una opción. Ver opciones anteriores para valores válidos | |
| .collapse("toggle") | Alterna el elemento plegable | Intentalo |
| .collapse("show") | Muestra el elemento plegable | Intentalo |
| .collapse("hide") | Oculta el elemento plegable | Intentalo |
colapso Eventos
En la siguiente tabla se enumeran los eventos Cerrar todos los disponibles.
| Evento | Descripción | Intentalo |
|---|---|---|
| show.bs.collapse | Se produce cuando el elemento plegable está a punto de ser mostrado | Intentalo |
| shown.bs.collapse | Se produce cuando el elemento plegable está totalmente muestra (después de transiciones CSS han completado) | Intentalo |
| hide.bs.collapse | Se produce cuando el elemento plegable está a punto de ser ocultado | Intentalo |
| hidden.bs.collapse | Se produce cuando el elemento plegable está totalmente oculta (después de las transiciones CSS han completado) | Intentalo |
Ejemplos
sencilla plegable
El siguiente ejemplo hace que un botón de alternar el contenido expansión y contracción de otro elemento:
Ejemplo
<button type="button" class="btn btn-info" data-toggle="collapse"
data-target="#demo">
Simple collapsible
</button>
<div id="demo"
class="collapse in">
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> Inténtalo tú mismo " 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
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 muestreo:
Nota: El data-parent de atributos se asegura 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 " Expandir y contraer Toggle Iconos y texto
En el siguiente ejemplo se cambia el / texto e icono de cierre abierta al abrir y cerrar el contenido plegable:
Ejemplo
$(document).ready(function(){
$("#demo").on("hide.bs.collapse",
function(){
$(".btn").html('<span class="glyphicon
glyphicon-collapse-down"></span> Open');
});
$("#demo").on("show.bs.collapse", function(){
$(".btn").html('<span
class="glyphicon glyphicon-collapse-up"></span> Close');
});
}); Inténtalo tú mismo " O puede utilizar CSS:
Ejemplo
/* Icon when the collapsible content is shown */
.btn:after {
font-family: "Glyphicons Halflings";
content: "\e114";
}
/* Icon when the collapsible content
is hidden */
.btn.collapsed:after {
content: "\e080";
} Inténtalo tú mismo "