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

Pure CSS.

HTML part:

<a data-toggle="collapse" href="#collapseExample"      aria-expanded="false" aria-controls="collapseExample">        Open/Close collapse<i class="fa fa-chevron-right pull-right"></i><i class="fa fa-chevron-down pull-right"></i></a>

The key element here is aria-expanded="false" or "true"

CSS:

a[aria-expanded=true] .fa-chevron-right {   display: none;}a[aria-expanded=false] .fa-chevron-down {   display: none;}