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

Question

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.

Answer 1

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 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:

http://jsfiddle.net/weaversnap/7FqsX/1/