How to make a Bootstrap accordion collapse when clicking the header div?
Twitter BootstrapTwitter Bootstrap-3Twitter Bootstrap Problem Overview
In a Bootstrap accordion, instead of requiring a click on the a
text, I want to make it collapse when clicking anywhere in the panel-heading
div.
I am using Bootstrap 3. So instead of accordion, it's just a collapsible panel. Any idea how to do the entire panel clickable?
Twitter Bootstrap Solutions
Solution 1 - Twitter Bootstrap
All you need to do is to to use...
data-toggle="collapse"
data-target="#ElementToExpandOnClick"
...on the element you want to click to trigger the collapse/expand effect.
The element with data-toggle="collapse"
will be the element to trigger the effect.
The data-target
attribute indicates the element that will expand when the effect is triggered.
Optionally you can set the data-parent
if you want to create an accordion effect instead of independent collapsible, e.g.:
data-parent="#accordion"
I would also add the following CSS to the elements with data-toggle="collapse"
if they aren't <a>
tags, e.g.:
.panel-heading {
cursor: pointer;
}
Here's a jsfiddle with the modified html from the Bootstrap 3 documentation.
Solution 2 - Twitter Bootstrap
Another way is make your <a>
full fill all the space of the panel-heading
. Use this style to do so:
.panel-title a {
display: block;
padding: 10px 15px;
margin: -10px -15px;
}
Check this demo (http://jsfiddle.net/KbQyx/).
Then when you clicking on the heading, you are actually clicking on the <a>
.
Solution 3 - Twitter Bootstrap
I've noticed a couple of minor flaws in grim's jsfiddle.
To get the pointer to change to a hand for the whole of the panel use:
.panel-heading {
cursor: pointer;
}
I've removed the <a>
tag (a style issue) and kept data-toggle="collapse" data-parent="#accordion" data-target="#collapse..."
on panel-heading
throughout.
I've added a CSS method for displaying chevron, using font-awesome.css
in my jsfiddle:
Solution 4 - Twitter Bootstrap
Here's a solution for Bootstrap4. You just need to put the card-header
class in the a
tag. This is a modified from an example in W3Schools.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div id="accordion">
<div class="card">
<a class="card-link card-header" data-toggle="collapse" href="#collapseOne" >
Collapsible Group Item #1
</a>
<div id="collapseOne" class="collapse" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="card">
<a class="collapsed card-link card-header" data-toggle="collapse" href="#collapseTwo">
Collapsible Group Item #2
</a>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="card">
<a class="card-link card-header" data-toggle="collapse" href="#collapseThree">
Collapsible Group Item #3
</a>
<div id="collapseThree" class="collapse" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
</div>
</div>
Solution 5 - Twitter Bootstrap
Simple solution would be to remove padding from .panel-heading
and add to .panel-title a
.
.panel-heading {
padding: 0;
}
.panel-title a {
display: block;
padding: 10px 15px;
}
This solution is similar to the above one posted by calfzhou, slightly different.
Solution 6 - Twitter Bootstrap
Here is the working example for Bootstrap 4.3
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" >
Collapsible Group Item #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" >
Collapsible Group Item #2
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" >
Collapsible Group Item #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
</div>
</div>
</div>
</div>
Solution 7 - Twitter Bootstrap
Actually my panel had this collapse state arrow icon and I tried other answers in this post , but icon position changed, so here is the solution with collapse state arrow icon.
Add this Custom CSS
.panel-heading
{
cursor: pointer;
padding: 0;
}
a.accordion-toggle
{
display: block;
padding: 10px 15px;
}
Credit's goes to this post answerer.
Hope helps.