En Bootstrap 4, el acordeón colapsa cuando se hace clic en el ancla o en la etiqueta del botón, pero veamos cómo hacer que un acordeón Bootstrap 4 se colapse al hacer clic en todo el encabezado con la ayuda del siguiente enfoque simple.
Primero, debe eliminar la etiqueta de anclaje y la etiqueta de botón dentro de div de class = «card-header» , excepto el título de la tarjeta. Ahora agregue la clase colapsada y el enlace de tarjeta a la clase existente = «encabezado de tarjeta» de div. Finalmente, agregue atributos como data-toggle=”collapse” data-target=”#collapseOne” .
Nota: El valor del atributo de destino de datos debe ser el ID de la etiqueta div colapsada.
<div class="card-header collapsed card-link" data-toggle="collapse" data-target="#collapseOne" > Collapsible header title </div> <div id="collapseOne" class="collapse" data-parent="#accordion"> <div class="card-body"> <!-- content to be collapsed --> </div> </div>
Ejemplo: El siguiente ejemplo ilustra cómo colapsar un acordeón de Bootstrap 4 al hacer clic en todo el div del encabezado con un enfoque simple.
<!DOCTYPE html> <html> <head> <title> Bootstrap 4 accordion collapse when clicking the whole header div </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.4.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> <center> <div class="container"> <h1 style="color:green;padding:13px;">GeeksforGeeeks</h1> <br> <p> Bootstrap 4 accordion collapse when clicking the whole header div </p> <div id="accordion"> <div class="card "> <div class="card-header collapsed card-link" data-toggle="collapse" data-target="#collapseOne"> GeeksforGeeks </div> <div id="collapseOne" class="collapse" 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 collapsed card-link" data-toggle="collapse" data-target="#collapseTwo"> Bootstrap </div> <div id="collapseTwo" class="collapse" data-parent="#accordion"> <div class="card-body"> Bootstrap is free and open-source collection of tools for creating websites and web applications. </div> </div> </div> <div class="card"> <div class="card-header collapsed card-link" data-toggle="collapse" data-target="#collapseThree"> HTML </div> <div id="collapseThree" class="collapse" data-parent="#accordion"> <div class="card-body"> HTML stands for HyperText Markup Language. It is used to design web pages using markup language. </div> </div> </div> </div> </center> </body> </htm
Producción:
Referencia: https://getbootstrap.com/docs/4.3/components/collapse/
Publicación traducida automáticamente
Artículo escrito por VigneshKannan3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA