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?
Best Answer
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. Thedata-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.:Here's a jsfiddle with the modified html from the Bootstrap 3 documentation.