Bootstrap panel accordion with icons

Bootstrap panel accordion with icons

HTML

<div id="accordion" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">
<a href="#collapseOne" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle">Profile</a>
</h5>
</div>
<div class="panel-collapse collapse in" id="collapseOne">
<div class="panel-body">
<p>Hello Sudhir</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">
<a href="#collapseTwo" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle">Profile</a>
</h5>
</div>
<div class="panel-collapse collapse" id="collapseTwo">
<div class="panel-body">
<p>This is only for testing</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">
<a href="#collapseThree" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle">Profile</a>
</h5>
</div>
<div class="panel-collapse collapse" id="collapseThree">
<div class="panel-body">
<p>Check out from changing the content</p>
</div>
</div>
</div>

</div>

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

</style>