Bohn Bohn - 6 months ago 34
jQuery Question

Making the whole header section of accordion clickable

Currently I am using accordion like this and I have that glyphicon arrows I can click on to expand/collapse it. : http://www.bootply.com/1fDNAjGFrJ

<div class="container">

<div class="panel-group" id="accordionMessagesSetup">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionMessagesSetup" href="#collapseMessagesSetup">
<span class="glyphicon glyphicon-chevron-up"></span>
Message Setup
</a>
</h4>
</div>
<div id="collapseMessagesSetup" class="panel-collapse collapse in">
<div>
Actual Content goes here

</div>
</div>
</div>
</div>
</div>

$('[data-toggle="collapse"]').click(function () {
$(this).children(".glyphicon").toggleClass("glyphicon-chevron-up glyphicon-chevron-down");
});


The clickable area currently is just that icon. How can expand it to make the whole
panel-title
section clickable ?

Answer

Make the anchor for panel title to have a block display.

For instance,

.panel-title a {
    display: block;
}

WORKING LINK

Hope this helps.