Collapsible Accordion - Header + Title + Chevron Click

by bizamajig

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<div class="accordion" id="accordion2">
		  <div class="accordion-group">
		    <div class="accordion-heading">
		      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
                </a>
		    </div>
		    <div id="collapseOne" class="accordion-body collapse in">
		      <div class="accordion-inner">
		        Collapsible Group Item #1		        Collapsible Group Item #1		        Collapsible Group Item #1		        Collapsible Group Item #1		        Collapsible Group Item #1		        Collapsible Group Item #1		        Collapsible Group Item #1		        Collapsible Group Item #1		        Collapsible Group Item #1		        Collapsible Group Item #1		        Collapsible Group Item #1		        Collapsible Group Item #1		        Collapsible Group Item #1		        Collapsible Group Item #1		        Collapsible Group Item #1		        Collapsible Group Item #1		        Collapsible Group Item #1		        Collapsible Group Item #1		        Collapsible Group Item #1
		      </div>
		    </div>
		  </div>
		  <div class="accordion-group">
		    <div class="accordion-heading">
		      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
		        Collapsible Group Item #2
		      </a>
		    </div>
		    <div id="collapseTwo" class="accordion-body collapse">
		      <div class="accordion-inner">
		        This is collapsible two
		      </div>
		    </div>
		  </div>
		  <div class="accordion-group">
		    <div class="accordion-heading">
		      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
		        Collapsible...

CSS

.panel-title:hover {
     cursor: pointer;
}
.accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "III\e114";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: grey;         /* adjust as needed */
}
.accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "III\e080";    /* adjust as needed, taken from bootstrap.css */
}