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.
<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= <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 |
Output:
Reference: https://getbootstrap.com/docs/4.3/components/collapse/
Please Login to comment...