En este artículo, veremos cómo podemos crear un elemento colapsado usando clases de Bootstrap y también veremos sus diferentes propiedades, además de comprender su implementación a través del ejemplo.
Elemento de colapso Bootstrap:
Los elementos colapsables son aquellos elementos que muestran datos al usuario cuando el usuario hace clic o se desplaza sobre ellos. Es un enfoque moderno que nos ayuda a mostrar una gran cantidad de datos al usuario. Mantiene el sitio web ordenado y se cierra o colapsa nuevamente cuando el usuario se desplaza o hace clic fuera de él. Podemos crear nuestro propio elemento colapsable utilizando HTML, CSS y JavaScript básicos. Pero Bootstrap facilita la propiedad del elemento colapsado en sus componentes.
Funcionamiento del elemento de colapso de Bootstrap :
El colapso de Bootstrap se usa para mostrar u ocultar contenido. Los botones o anclas se utilizan para activar la solicitud y se asignan al elemento específico que debe contraerse. En Bootstrap, el elemento colapsado anima la altura del elemento desde su altura actual hasta 0.
Las clases utilizadas para colapsar el elemento:
- .collapse: esta clase oculta el contenido.
- .collapsing: Esta clase se usa durante la transición.
- .collapse-show: esta clase muestra el contenido.
Consulte el artículo Bootstrap 4 Collapse para obtener más detalles.
Generalmente, el elemento colapsado se hace usando el botón. Aquí, usaremos un botón para mostrar el funcionamiento del elemento plegable.
Sintaxis:
<button type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseExample">Button
</button>
Los dos atributos que se utilizan con el botón se indican a continuación:
- data-bs-target: este atributo contiene la identificación del elemento que se necesita ocultar o mostrar al hacer clic en un botón.
- data-bs-toggle: este atributo siempre se establece en «contraer».
En el siguiente ejemplo, podemos ver que se proporciona un botón con los atributos «data-bs-toggle» configurados en «collapse» y «data-bs-target» con el valor establecido en «#collapseExample», es decir, la identificación del elemento div que debe hacerse plegable. Al «div» se le da la clase «colapso» para hacerlo colapsable.
Ejemplo : este ejemplo describe el elemento colapsado.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity= "sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity= "sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"> </script> <title>Document</title> </head> <body> <h1 class=text-success>GeeksforGeeks</h1> <p> <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Button of Collapsing Element </button> </p> <div class="collapse" id="collapseExample"> <div class="card card-body"> This text is shown when the above button is clicked and hides when user clicks on it again. </div> </div> </body> </html>
Producción:
Elemento de colapso simple en Bootstrap
Elemento de colapso horizontal:
También podemos hacer elementos colapsables horizontales. Aquí, en lugar de vertical, el elemento colapsará horizontalmente. Para hacer un elemento colapsable horizontalmente, necesitamos agregar la clase “collapse-horizontal” al elemento que se colapsará. Necesitamos que se mencione el ancho del elemento secundario, ya sea usando el CSS en línea o usando solo las utilidades de ancho.
Sintaxis:
<div class="collapse collapse-horizontal"></div>
Ejemplo : este ejemplo describe el elemento de contracción horizontal.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity= "sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity= "sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"> </script> <title>Document</title> </head> <body> <h1 class=text-success>GeeksforGeeks</h1> <p> <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Button of Collapsing Element </button> </p> <div> <div class="collapse collapse-horizontal" id="collapseExample"> <div class="card card-body" style="width: 500px;"> This text is shown when the above button is clicked and hides when user clicks on it again. </div> </div> </div> </body> </html>
Producción:
Colapsar Elemento de Manera Horizontal
Múltiple plegable:
También podemos hacer un solo botón para controlar varios elementos plegables a la vez. La idea es muy simple, aquí tenemos que crear varios elementos con el mismo nombre de clase y agregar ese nombre de clase al «objetivo de base de datos».
Nota : Usamos el nombre de la clase aquí, no la identificación porque la identificación es única para cada elemento en HTML.
Sintaxis:
<div class="collapse multi-collapse"></div>
Ejemplo : este ejemplo describe el elemento plegable múltiple.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity= "sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity= "sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"> </script> <title>Document</title> </head> <body> <h1 class=text-success>GeeksforGeeks</h1> <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2"> Toggle both elements </button> <div class="row"> <div class="col"> <div class="collapse multi-collapse" id="multiCollapseExample1"> <div class="card card-body"> This text is shown when the above button is clicked and hides when user clicks on it again. </div> </div> </div> <div class="col"> <div class="collapse multi-collapse" id="multiCollapseExample2"> <div class="card card-body"> This text is shown when the above button is clicked and hides when user clicks on it again. </div> </div> </div> </div> </body> </html>
Producción:
Múltiples plegables en Bootstrap
En el código anterior, el atributo «data-bs-target» del botón recibe el valor del nombre de clase «.collapse» y, por lo tanto, el botón ahora funciona en ambos elementos contraíbles a la vez.
Nota : También podemos hacer que los elementos anteriores muestren contenido individualmente asignándolos a botones separados usando su «id».
Navegador compatible:
- Google Chrome
- Borde de Microsoft
- Internet Explorer 10+
- Ópera
- Safari
- Firefox
Publicación traducida automáticamente
Artículo escrito por saikatmohanta43434 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA