Answer by Inti for Bootstrap 3 collapse change chevron icon on click

The simplest answer I could find and thought it would be useful to add here for others.

Essentially this involved this bit of css

/* Rotating glyphicon when expanding/collapsing */.collapse-chevron .glyphicon {  transition: .3s transform ease-in-out;}.collapse-chevron .collapsed .glyphicon {  transform: rotate(-90deg);}

which applied to this bit of html

<div class="collapse-chevron"><a data-toggle="collapse" class="collapsed" href="#collapseFilter"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span><strong>link to toggle</strong></a><div class="collapse" id="collapseFilter"><p>Some content I want collapsed or expanded</p></div></div>

Codepen of this code: https://codepen.io/anon/pen/PKxzVa

Source: this article

See the codepen from the article for some more examples: https://codepen.io/disjfa/pen/EZdMpe