Bootstrap es un marco CSS front-end de código abierto que se usa ampliamente para el desarrollo de sitios web interactivos. Bootstrap con HTML y JavaScript agrega interactividad a la interfaz de usuario. jQuery es una biblioteca JS utilizada para la manipulación de HTML DOM, manejo de eventos, animaciones CSS y Ajax. jQuery también es una biblioteca gratuita de código abierto utilizada por más del 73 % de los desarrolladores. jQuery realiza las tareas realizadas por JavaScript de forma simplificada.
En este artículo, discutiremos los métodos para mostrar las dos primeras filas en colapso dinámico. Bootstrap viene con una amplia variedad de características y una de las características que ofrece Bootstrap es el componente plegable que se utiliza para mostrar y ocultar contenidos. Los botones o anclas se utilizan como activadores de elementos específicos que alternamos. Las siguientes son las clases que ayudan a colapsar para mostrar un elemento.
Clases:
- .collapse: esta clase oculta el contenido
- .collapsing : esta clase se aplica durante las transiciones de un estado colapsado a un estado visible y viceversa
- .collapse.show : esta clase muestra el contenido.
Accesibilidad: Un acordeón puede demostrar nuestro requerimiento. El componente «tarjeta» se usa para extender el comportamiento de contracción predeterminado para crear un acordeón. El atributo aria-expanded se agrega al elemento de control. Este atributo indica el estado actual del elemento contraíble vinculado al control.
Si, de forma predeterminada, el elemento contraíble está cerrado, el atributo se establece en aria-expanded=”false” . Si el elemento contraíble se va a mostrar de forma predeterminada mediante la clase show , configure aria-expanded=”true” en el control. Esto alterna automáticamente este atributo en el control según el estado actual del elemento contraíble.
Si el elemento de control apunta a un solo elemento contraíble, es decir, el atributo de destino de datos apunta a un selector de «id», entonces debemos agregar el atributo aria-controls al elemento de control que contiene la «id» del elemento contraíble. Todos los elementos contraíbles debajo del principal se cerrarán cuando se muestre el elemento contraíble.
Ejemplo 1:
<!DOCTYPE html> <html> <head> <!-- CSS only --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity= "sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <!-- JS, Popper.js, jquery --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity= "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"> </script> <script src= "https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity= "sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity= "sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"> </script> </head> <body> <!-- Accordion wrapper starts --> <div class="accordion" id="accordionExample"> <div class="card"> <!-- Visible portion in collapsed state --> <div class="card-header" id="headingOne"> <h2 class="mb-0"> <!-- no data-toggle, data-target, aria-expanded, aria-controls attributes are used --> <!-- The toggling functionality is lost --> <button class="btn btn-link" type="button"> Collapsible Item 1 </button> </h2> </div> <!-- Content to be displayed in open state --> <!-- data-parent attribute removed so that the cards are not dependent on each other --> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"> <div class="card-body"> This is slot 1. </div> </div> </div> <div class="card"> <!--visible portion in collapsed state--> <div class="card-header" id="headingTwo"> <h2 class="mb-0"> <!-- no data-toggle, data-target, aria-expanded, aria-controls attributes are used --> <!-- The toggling functionality is lost--> <button class="btn btn-link collapsed" type="button"> Collapsible Item 2 </button> </h2> </div> <!-- Content to be displayed in open state --> <!-- data-parent attribute removed so that the cards are not dependent on each other--> <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo"> <div class="card-body"> This is slot 2. </div> </div> </div> <div class="card"> <div class="card-header" id="headingThree"> <h2 class="mb-0"> <!-- data-toggle, data-target, aria-expanded, aria-controls attributes are used --> <!-- As a result the toggling functionality are intact --> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Item 3 </button> </h2> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"> <div class="card-body"> This is slot 3. </div> </div> </div> <div class="card"> <div class="card-header" id="headingFour"> <h2 class="mb-0"> <!-- data-toggle, data-target, aria-expanded, aria-controls attributes are used --> <!-- The toggling functionality are intact --> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> Collapsible Item 4 </button> </h2> </div> <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionExample"> <div class="card-body"> This is slot 4. </div> </div> </div> </div> </body> </html>
Producción:
En el siguiente ejemplo, las dos primeras filas del acordeón siempre permanecen abiertas de forma predeterminada. No hay efecto de alternancia incluso cuando se hace clic en los encabezados de las filas. Esto se debe a que las dos primeras filas no tienen los atributos «data-toggle», «data-target», «aria-expanded», «aria-controls» que provocan el efecto de alternancia. Como el atributo principal de datos también se elimina para las dos primeras filas, son independientes de las filas restantes que muestran la funcionalidad de alternancia. Las últimas dos filas tienen intactos todos los atributos necesarios, por lo que muestran la funcionalidad de contracción dinámica.
Enfoque: el segundo enfoque es muy similar al primero, excepto que creamos acordeones anidados y eliminamos el atributo de alternancia de datos para las dos primeras filas. Las dos primeras filas tienen el atributo principal de datos . Si el usuario desea agregar una función de contracción a las dos primeras filas, agregue el atributo de alternancia de datos . Al hacer clic en la primera fila, el encabezado se abrirá y colapsará la segunda fila y viceversa. Las dos primeras filas son independientes de las dos últimas filas como los valores de atributo principal de datos para la primera y la segunda fila.
<!DOCTYPE html> <html> <head> <!-- CSS only --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity= "sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <!-- JS, Popper.js, jquery and jQuery autocomplete --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity= "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"> </script> <script src= "https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity= "sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity= "sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"> </script> </head> <body> <!-- Accordion wrapper starts --> <div class="accordion" id="accordionExample"> <div class="card"> <!-- Visible portion in collapsed state --> <div class="card-header" id="headingOne"> <h2 class="mb-0"> <!-- data-toggle attribute removed --> <button class="btn btn-link" type="button" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Item 1 </button> </h2> </div> <!--content to be displayed in open state--> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> This is slot 1. </div> </div> </div> <div class="card"> <!-- Visible portion in collapsed state --> <div class="card-header" id="headingTwo"> <h2 class="mb-0"> <!--data-toggle attribute removed--> <button class="btn btn-link collapsed" type="button" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"> Collapsible Item 2 </button> </h2> </div> <!-- Content to be displayed in open state --> <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample"> <div class="card-body"> This is slot 2. </div> </div> </div> <!-- nested accordion --> <div class="accordion" id="accordionExample1"> <div class="card"> <!--visible portion in collapsed state--> <div class="card-header" id="headingThree"> <h2 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Item 3 </button> </h2> </div> <!-- Content to be displayed in open state --> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample1"> <div class="card-body"> This is slot 3. </div> </div> </div> <div class="card"> <!-- Visible portion in collapsed state --> <div class="card-header" id="headingFour"> <h2 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> Collapsible Item 4 </button> </h2> </div> <!-- Content to be displayed in open state --> <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionExample1"> <div class="card-body"> This is slot 4. </div> </div> </div> </div> <!-- end of nested accordion--> </div> </body> </html>
Salida: Salida de 
vídeo:
Publicación traducida automáticamente
Artículo escrito por Shreyasi_Chakraborty y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA