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.

I am using Bootstrap 3. So instead of accordion, it's just a collapsible panel. Any idea how to do the entire panel clickable?

Answer 1

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.

Answer 2

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