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

28 Nov, 2019
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.
<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>
Example: Below example illustrate how to make a Bootstrap 4 accordion collapse when clicking the whole header div with simple approach.
<!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   
Output:
Reference: https://getbootstrap.com/docs/4.3/components/collapse/
Bootstrap-4
Bootstrap-Misc
Picked
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to pass data into a bootstrap modal?
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
Difference between Bootstrap 4 and Bootstrap 5
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?