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/