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

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.