I'm using font awesome! and wanted a panel to be collapsible
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-target="#collapseOrderItems"><i class="fa fa-chevron fa-fw" ></i> products</div>
<div class="collapse in" id="collapseOrderItems">
....
</div>
</div>
and the css
.panel-heading .fa-chevron:after {
content: "\f078";
}
.panel-heading.collapsed .fa-chevron:after {
content: "\f054";
}