Colapso de Bootstrap 4 JS
Contraer clases de CSS
Para obtener un tutorial sobre plegables, lea nuestro Tutorial de colapso de Bootstrap .
| Class | Description | Example |
|---|---|---|
.collapse |
Hides the content | |
.collapse show |
Shows the collapsible content by default | |
.collapsing |
Added when the transition starts, and removed when it finishes |
A través de datos-* Atributos
Simplemente agregue data-toggle="collapse"y un data-targetelemento para asignar automáticamente el control de un elemento contraíble. El atributo de destino de datos acepta un selector de CSS para aplicar el colapso. Asegúrese de agregar el colapso de clase al elemento contraíble. Si desea que se abra de forma predeterminada, agregue la clase adicional "mostrar".
Ejemplo
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
Sugerencia: para agregar una administración de grupos similar a un acordeón a un control contraíble, agregue el atributo de datos data-parent="#selector".
A través de JavaScript
Habilitar manualmente con:
$('.collapse').collapse()
Contraer opciones
Las opciones se pueden pasar a través de atributos de datos o JavaScript. Para los atributos de datos, agregue el nombre de la opción a data-, como en data-parent="".
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| parent | selector | false | All collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior) | |
| toggle | boolean | true | Toggles the collapsible element on invocation |
Contraer métodos
La siguiente tabla enumera todos los métodos de contracción disponibles.
| Method | Description | Try it |
|---|---|---|
| .collapse(options) | Activates the collapsible element with an option. See options above for valid values | |
| .collapse("toggle") | Toggles the collapsible element | |
| .collapse("show") | Shows the collapsible element | |
| .collapse("hide") | Hides the collapsible element | |
| .collapse("dispose") | Destroys the collapsible element |
Ocultar eventos
La siguiente tabla enumera todos los eventos de colapso disponibles.
| Event | Description | Try it |
|---|---|---|
| show.bs.collapse | Occurs when the collapsible element is about to be shown | |
| shown.bs.collapse | Occurs when the collapsible element is fully shown (after CSS transitions have completed) | |
| hide.bs.collapse | Occurs when the collapsible element is about to be hidden | |
| hidden.bs.collapse | Occurs when the collapsible element is fully hidden (after CSS transitions have completed) |