Bootstrap - Contraer complemento

El complemento colapso facilita el colapso de divisiones de la página. Ya sea que lo use para construir una navegación en acordeón o cuadros de contenido, permite muchas opciones de contenido.

Si desea incluir esta funcionalidad de complemento individualmente, necesitará el collapse.js. Esto también requiere que el complemento de transición se incluya en su versión de Bootstrap. De lo contrario, como se menciona en el capítulo Descripción general de los complementos de Bootstrap , puede incluir bootstrap.js o bootstrap.min.js minificado .

Puede usar el complemento de colapso:

  • To create collapsible groups or accordion. Esto se puede crear como en el ejemplo de muestra a continuación:

<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 = "#collapseOne">
               Click me to expand. Click me again to collapse.Section 1
            </a>
         </h4>
      </div>
      
      <div id = "collapseOne" class = "panel-collapse collapse in">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
               nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-default">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo">
               Click me to expand. Click me again to collapse.Section 2
            </a>
         </h4>
      </div>

      <div id = "collapseTwo" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-default">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree">
               Click me to expand. Click me again to collapse.Section 3
            </a>
         </h4>
      </div>
     
      <div id = "collapseThree" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
     
   </div>
</div>

  • data-toggle = "collapse" se agrega al enlace en el que hace clic para expandir o contraer el componente.

  • href o un data-targetEl atributo se agrega al componente principal, cuyo valor es el id del componente secundario.

  • data-parent Se agrega el atributo para crear el efecto de acordeón.

  • Para crear un plegado simple sin el marcado de acordeón : esto se puede crear como en el ejemplo de muestra a continuación:

<button type = "button" class = "btn btn-primary" data-toggle = "collapse" data-target = "#demo">
   simple collapsible
</button>

<div id = "demo" class = "collapse in">
   Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
      sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>

Como puede ver en el ejemplo, hemos creado un componente plegable simple, a diferencia del acordeón, no hemos agregado el atributo data-parent.

Uso

La siguiente tabla enumera las clases que utiliza el complemento de colapso para manejar el trabajo pesado:

No Señor. Clase y descripción
1

.collapse

Oculta el contenido.
2

.collapse.in

Muestra el contenido.
3

.collapsing

Se agrega cuando comienza la transición y se elimina cuando finaliza.

Puede usar el complemento colapso de dos maneras:

  • Via data attributes - Agregar data-toggle = "collapse" y un data-targetal elemento para asignar automáticamente el control de un elemento plegable. losdata-targetEl atributo aceptará un selector de CSS para aplicar la contracción. Asegúrate de agregar la clase.collapseal elemento plegable. Si desea que se abra de forma predeterminada, incluya la clase adicional.in.

    Para agregar una administración de grupo similar a un acordeón a un control plegable, agregue el atributo de datos data-parent = "#selector".

  • Via JavaScript - El método de colapso se puede activar con JavaScript como se muestra a continuación -

$('.collapse').collapse()

Opciones

Hay ciertas opciones que se pueden pasar a través de atributos de datos o JavaScript se enumeran en la siguiente tabla:

Nombre de opción Tipo / Valor predeterminado Nombre del atributo de datos Descripción
padre selector Predeterminado - falso padre de datos Si selector es falso, entonces todos los elementos colapsables bajo el padre especificado se cerrarán (similar al comportamiento de acordeón tradicional, esto depende de la clase de grupo de acordeón).
palanca booleano predeterminado - verdadero alternar datos Alterna el elemento plegable en la invocación.

Métodos

Aquí hay una lista de algunos métodos útiles que se utilizan con elementos plegables.

Método Descripción Ejemplo

Options - .collapse (opciones)

 Activa su contenido como un elemento plegable. Acepta un objeto de opciones opcionales. 
$('#identifier').collapse({
   toggle: false
})

Toggle - .collapse ('alternar')

 Cambia un elemento plegable a mostrado u oculto. 
$('#identifier').collapse('toggle')

Show - .collapse ('mostrar')

 Muestra un elemento plegable. 
$('#identifier').collapse('show')

Hide - .collapse ('ocultar')

 Oculta un elemento plegable. 
$('#identifier').collapse('hide')

Ejemplo

El siguiente ejemplo demuestra el uso de métodos:

<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 = "#collapseOne">
               Click me to expand. Click me again to collapse. Section 1--hide method
            </a>
         </h4>
      </div>
      
      <div id = "collapseOne" class = "panel-collapse collapse in">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-success">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo">
               Click me to expand. Click me again to collapse. Section 2--show method
            </a>
         </h4>
      </div>
      
      <div id = "collapseTwo" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-info">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree">
               Click me to expand. Click me again to collapse. Section 3--toggle method
            </a>
         </h4>
      </div>
      
      <div id = "collapseThree" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
   </div>
   
   <div class = "panel panel-warning">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseFour">
               Click me to expand. Click me again to collapse. Section 4--options method
            </a>
         </h4>
      </div>
      
      <div id = "collapseFour" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
</div>

<script type = "text/javascript">
   $(function () { $('#collapseFour').collapse({
      toggle: false
   })});
  
   $(function () { $('#collapseTwo').collapse('show')});
   $(function () { $('#collapseThree').collapse('toggle')});
   $(function () { $('#collapseOne').collapse('hide')});
</script>

Eventos

La siguiente tabla enumera algunos eventos que se pueden utilizar con la función de contracción.

Evento Descripción Ejemplo
show.bs.collapse Se activa después de llamar al método show. 
$('#identifier').on('show.bs.collapse', function () {
   // do something
})
mostrado.bs.collapse Este evento se activa cuando un elemento de colapso se ha hecho visible para el usuario (esperará a que se completen las transiciones CSS). 
$('#identifier').on('shown.bs.collapse', function () {
   // do something
})
hide.bs.collapse Se activa cuando se ha llamado al método de la instancia oculta. 
$('#identifier').on('hide.bs.collapse', function () {
   // do something
})
hidden.bs.collapse Este evento se activa cuando un elemento de colapso se ha ocultado al usuario (esperará a que se completen las transiciones CSS). 
$('#identifier').on('hidden.bs.collapse', function () {
   // do something
})

Ejemplo

El siguiente ejemplo demuestra el uso de eventos:

<div class = "panel-group" id = "accordion">
   <div class = "panel panel-info">
   
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseexample">
               Click me to expand. Click me again to collapse. Section --shown event
            </a>
         </h4>
      </div>
      
      <div id = "collapseexample" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
</div>

<script type = "text/javascript">
   $(function () { 
      $('#collapseexample').on('show.bs.collapse', function () {
         alert('Hey, this alert shows up when you expand it');
      })
   });
</script>