How to make a Bootstrap 4 accordion collapse when clicking the whole header div ? Last Updated : 28 Nov, 2019 Comments Improve Suggest changes Like Article Like Report 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. html <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. html <!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/ Comment More infoAdvertise with us Next Article How to automatically close all collapsible elements inside of the accordion when closing the accordion? V VigneshKannan3 Follow Improve Article Tags : Web Technologies Bootstrap Bootstrap-4 Bootstrap-Misc Similar Reads How to Change Accordion Button Collapsed Icon Color in Bootstrap ? This article demonstrates how to customize the colors of the accordion button icons in a Bootstrap accordion. By default, Bootstrap accordions use a plus/minus arrow icon to indicate the collapsed or expanded state of accordion items. This tutorial provides step-by-step instructions on how to change 3 min read How to change (-, +) symbol with a button in Bootstrap Accordion ? In Bootstrap 4, there is no default option for changing (-, +) symbol with a button accordion. Hence it can be done by using jQuery. The Following Approach will explain clearly.Approach:Â Â Font awesome or any icon utilities to display (-, +) symbol:Â Â <link rel="stylesheet" href="https://use.font 4 min read How to automatically close all collapsible elements inside of the accordion when closing the accordion? The Collapse plugin provides a quick way of revealing and hiding content. It flip the perceivability of content over program with a couple of classes and Bootstrap 4 JavaScript plugins. Flipping(toggling) of content requires to connect with the href attribute, or a button with the data-target proper 9 min read How to make collapsible button appear only in mobile view using Bootstrap ? Collapsible button is used to hide or display the list of contents on clicking the button. On clicking collapsible button, it expands and displays list of contents to select, which then mapped to specific content. Bootstrap has different classes for creating collapsible elements. Collapsible button 1 min read How to disable click outside modal to close modal in bootstrap ? Bootstrap is a very powerful, extensible, and feature-packed fronted toolkit which is used to build fast and responsive websites. Bootstrap 5 provides us with its powerful Modal component which can be used to create models within the website at an ease. In this article, we are going to see how we ca 3 min read How to remove active nav-tab when click outside of nav-tab in Bootstrap ? Bootstrap has the class called "collapse navbar-collapse" which collapses the navigation bar when the user changes the screen resolution. The java-script along-with it at the bottom of the code triggers the collapsed menu in such a way that when the user clicks the hamburger icon of the menu and nav 2 min read Like