How to make a Bootstrap accordion collapse when clicking the header div?

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.