Bootstrap 4 ofrece diferentes clases para crear elementos plegables. Un elemento plegable se utiliza para ocultar o mostrar una gran cantidad de contenido. Al hacer clic en un botón, apunta a un elemento contraíble, la transición de clase se lleva a cabo de la siguiente manera:
- .collapse: Oculta el contenido.
- .collapsing: Se aplica durante las transiciones.
- .collapse.show: Muestra el contenido.
Plegable básico: la clase .collapse indica un elemento plegable, es decir, el contenido que se mostrará u ocultará con un clic de un botón. Para controlar (mostrar/ocultar) el contenido contraíble, agregue el atributo data-toggle = “collapse” a un ancla o un elemento de botón. Luego agregue el atributo data-target = “#collapseExample” para conectar el botón con el contenido contraíble.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Collapse Demonstration</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> <head> <body> <div class="container"> <!-- Button trigger modal --> <h2 class="mb-1" style="padding-bottom: 15px;"> Toggle Collapse </h2> <p> <a class="btn btn-success" data-toggle="collapse" href="#example_1" role="button" aria-expanded="false" aria-controls="example_1"> GeeksforGeeks </a> <button class="btn btn-success" type="button" data-toggle="collapse" data-target="#example_2" aria-expanded="false" aria-controls="example_2"> Bootstrap </button> </p> <div class="collapse" id="example_1"> <div class="card card-body"> GeeksforGeeks is a computer science portal. It is the best platform to lean programming. </div> </div> <div class="collapse" id="example_2"> <div class="card card-body"> Bootstrap is a free and open-source collection of tools for creating websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. </div> </div> </div> </body> </html>
Producción:
Plegable de alternancia múltiple: un botón o etiqueta de anclaje puede mostrar u ocultar varios elementos al hacer referencia a ellos con un selector JQuery en su href o atributo de destino de datos. Varios botones o etiquetas de anclaje pueden mostrar y ocultar un elemento si pueden hacer referencia a él con su href o atributo de destino de datos.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Collapse Demonstration</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> <head> <body> <div class="container"> <h2 class="mb-1" style="padding-bottom: 15px;"> Toggle Collapse </h2> <p> <a class="btn btn-success" data-toggle="collapse" href="#collapse1" role="button" aria-expanded="false" aria-controls="collapse1"> Toggle GeeksforGeeks </a> <button class="btn btn-success" type="button" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2"> Toggle Bootstrap </button> <button class="btn btn-success" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="collapse1 collapse2"> Toggle both </button> </p> <div class="collapse multi-collapse" id="collapse1"> <div class="card card-body"> GeeksforGeeks is a computer science portal. It is the best platform to lean programming. </div> </div> <div class="collapse multi-collapse" id="collapse2"> <div class="card card-body"> Bootstrap is a free and open-source collection of tools for creating websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. </div> </div> </div> </body> </html>
Acordeón: El siguiente ejemplo muestra un acordeón simple al extender el componente del panel. El uso del atributo principal de datos para asegurarse de que todos los elementos plegables bajo el padre especificado se cerrarán cuando se muestre uno de los elementos plegables.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Collapse Demonstration</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> <head> <body> <div class="container"> <h2 style="padding-bottom: 15px;"> Accordion </h2> <div id="accordion"> <div class = "card"> <div class = "card-header"> <a class = "card-link" data-toggle = "collapse" href = "#description1"> GeeksforGeeks </a> </div> <div id = "description1" class = "collapse show" data-parent = "#accordion"> <div class = "card-body"> GeeksforGeeks is a computer science portal. It is the best platform to lean programming. </div> </div> </div> <div class = "card"> <div class = "card-header"> <a class = "collapsed card-link" data-toggle = "collapse" href = "#description2"> Bootstrap </a> </div> <div id = "description2" class = "collapse" data-parent = "#accordion"> <div class = "card-body"> Bootstrap is a free and open-source collection of tools for creating websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. </div> </div> </div> <div class = "card"> <div class = "card-header"> <a class = "collapsed card-link" data-toggle = "collapse" href = "#description3"> HTML </a> </div> <div id = "description3" class = "collapse" data-parent = "#accordion"> <div class = "card-body"> HTML stands for Hyper Text Markup Language. It is used to design web pages using markup language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages. Markup language is used to define the text document within tag which defines the structure of web pages. </div> </div> </div> </div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por GaganTalreja1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA