El complemento Bootstrap Collapse ayuda a colapsar el contenido de la página web y alternar su visibilidad en la aplicación. El complemento ayuda a dividir el contenido de la página y facilita el colapso y también admite muchas opciones de contenido como un acordeón.
Enfoque: Bootstrap ofrece algunas funciones de JavaScript como un atributo y el complemento de colapso de JavaScript viene con un atributo llamado data-* .
Para alternar cualquier dato:
- El atributo de alternancia de datos está configurado para contraerse en su botón de alternar.
- El objetivo de datos se establece en la clase o id de un div que desea alternar.
- Establezca la clase div en data-toggle=collapse que desea alternar para que los datos no estén visibles inicialmente.
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <head> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <h2>Bootstrap collapse plugin</h2> <button class="btn" data-toggle="collapse" data-target="#disappear"> Collapsible </button> <div id="disappear" class="collapse"> This is a disappearing message </div> </div> </body> </html>
Producción:
Ejemplo 2: en un acordeón, es posible que necesite otro atributo llamado data-parent que asegure que todos los elementos contraíbles debajo del padre dado estén cerrados si se muestra uno de los elementos. Para tales casos, establezca el atributo principal de datos en el id o la clase del div del contenedor .
HTML
<!DOCTYPE html> <html> <head> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <h2>Bootstrap collapse plugin</h2> <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 Number 1 </a> </h4> </div> <div id="collapse1" class= "panel-collapse collapse in"> <div class="panel-body"> This is the message of collapse1. </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 Number 2 </a> </h4> </div> <div id="collapse2" class= "panel-collapse collapse"> <div class="panel-body"> This is the message of collapse2. </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 Number 3 </a> </h4> </div> <div id="collapse3" class= "panel-collapse collapse"> <div class="panel-body"> This is the message of collapse3. </div> </div> </div> </div> </div> </body> </html>
Producción:
Navegador compatible:
- Google Chrome
- Borde de Microsoft
- Firefox
- Ópera
- Safari