Bohn Bohn - 1 year ago 243
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. :

<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
<div id="collapseMessagesSetup" class="panel-collapse collapse in">
Actual Content goes here


$('[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
section clickable ?

Answer Source

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

For instance,

.panel-title a {
    display: block;


Hope this helps.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download