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.
- How to automatically close all collapsible elements inside of the accordion when closing the accordion?
- How to create Nested Accordion using Google AMP amp-accordion?
- How to create Auto-collapsing accordion using Google AMP amp-accordion ?
- How to create Animated accordion using Google AMP amp-accordion ?
- How to create Comparison accordion using Google AMP amp-accordion ?
- How to create Hidden Header using Google AMP amp-accordion?
- How to create Dynamic Header using Google AMP amp-accordion?
- How to make whole row in a table clickable as link in Bootstrap ?
- Bootstrap 4 | Collapse
- Bootstrap 5 Collapse
- How to always show first two rows in dynamic collapse using Bootstrap ?
- How to accordion scroll to top to open content in Bootstrap ?
- How to change (-, +) symbol with a button in Bootstrap Accordion ?
- How to set horizontal aligned accordion in Bootstrap 4 ?
- Bootstrap 4 | Accordion
- How to overlay one div over another div using CSS
- How to copy the content of a div into another div using jQuery ?
- How to center a div within another div?
- How to clear all div's content inside a parent div ?
- How to align header with wrapper in Bootstrap ?
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.