CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Bohn
Bohn

Reputation: 26919

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

$('[data-toggle="collapse"]').click(function() {
  $(this).children(".glyphicon").toggleClass("glyphicon-chevron-up glyphicon-chevron-down");
});
<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>

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

Upvotes: 1

Views: 1777

Answers (3)

Nitesh
Nitesh

Reputation: 15739

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

For instance,

.panel-title a {
    display: block;
}

WORKING LINK

Hope this helps.

Upvotes: 1

twxia
twxia

Reputation: 1813

Just a simple css case, let a be a block and use padding to fill title: 

.accordion-toggle {
  display: block;
  padding: 10px 15px;
}

.panel-heading {
   padding: 0;
}

Upvotes: 2

Rahul Arora
Rahul Arora

Reputation: 4523

Just add this to your css

.accordion-toggle{
   display: block;
}

Upvotes: 1

Related Questions