How to make a Bootstrap 4 accordion collapse when clicking the whole header div ?

In Bootstrap 4, Accordion collapse when anchor or button tag is clicked but lets see how to make a Bootstrap 4 accordion collapse when clicking the whole header with the help of following simple approach.

First you have to remove anchor tag and button tag within div of class=”card-header” except card title. Now add class collapsed and card-link to existing class=”card-header” of div. Finally, add attributes like data-toggle=”collapse” data-target=”#collapseOne”.

Note: The data-target attribute value must be the id of the collapsing div tag.

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Example: Below example illustrate how to make a Bootstrap 4 accordion collapse when clicking the whole header div with simple approach.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </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   

chevron_right


Output:

Reference: https://getbootstrap.com/docs/4.3/components/collapse/




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.