How to make a Bootstrap accordion collapse when clicking the header div?
twitter-bootstrap, twitter-bootstrap-3
Solution
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.
Problem
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?