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.
Example: Below example illustrate how to make a Bootstrap 4 accordion collapse when clicking the whole header div with simple approach.
- Bootstrap 4 | Collapse
- How to set horizontal aligned accordion in Bootstrap 4 ?
- How to change (-, +) symbol with a button in Bootstrap Accordion ?
- How to accordion scroll to top to open content in Bootstrap ?
- How to make horizontal scrollable in a bootstrap row?
- How to make whole row in a table clickable as link in Bootstrap ?
- How to make Bootstrap popover appear/disappear on hover instead of click?
- How to make Bootstrap table with sticky table head?
- CSS | border-collapse Property
- Collapse multiple Columns in Pandas
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.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.