¿Cómo hacer que un acordeón de Bootstrap 4 colapse al hacer clic en todo el div del encabezado?

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *