Collapse.JS creating a dropdown icon on panel heading

Standard

By default Bootstrap 3 comes integrated with CollapseJS which offers expandable accordion like panels. These panels are very simple to setup and work great. However, since the font is uncolored it may not be obvious to some users that this panel expands.

Appears to be collapsible

Appears to be collapsible

Using pure CSS a dropdown icon can be placed on all panels that you create. The css places the icon after the link, and switches the icon to a down arrow once the panel has been expanded.

The CSS

.panel-heading a:after {
   font-family: 'Glyphicons Halflings';
   content: "\e114";
   float: right;
   color: grey;
}

.panel-heading a.collapsed:after {
   content: "\e080";
}

The result

The result is a more user intuitive collapsible panel. The main difference between using the Primefaces collapsible panel and the bootstrap js version is data accessibility. Primefaces will call a ajax event once the panel is to be rendered. Whereas CollapseJS will have already loaded the data from the backend bean. This may require you to update at the prerendered content manually, but the benefits of self managing the panels far outweighs the negatives.