Answer by Red Web for Bootstrap 3 collapse change chevron icon on click

you can try this.

Here's the HTML Code:

<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> Collapsible Group Item #1<span class="glyphicon glyphicon-chevron-up"></span> </a>

Here's the JQuery

$('#accordion').on('shown.bs.collapse hidden.bs.collapse', function (e) {         $(e.target).prev('.panel-heading').find("span.glyphicon").toggleClass('glyphicon-chevron-up glyphicon-chevron-down',200, "easeOutSine" );});