In this blog i will explain how to change the accordion icon.

I have used two methods here:

1. Using Jquery
2. Using CSS

Here is the boostrap accordion html :

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a class="collapsed accordion-toggle clearfix" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" >
          Collapsible Group Item #1 
          <span class="glyphicon glyphicon-chevron-up pull-right"></span>
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body" >
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading " role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed accordion-toggle clearfix" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" >
          Collapsible Group Item #2
          <span class="glyphicon glyphicon-chevron-up pull-right"></span>
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed accordion-toggle clearfix" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
          <span class="glyphicon glyphicon-chevron-up pull-right"></span>
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor.
      </div>
    </div>
  </div>
</div>

1.) Using Jquery:
 

$(document).ready(function(){
			$('.accordion-toggle').click(function(){
	          	$(this).parents(".panel").siblings().find(".panel-heading").removeClass("bg-red");
	            $(this).parents(".panel-heading").toggleClass("bg-red");
	           
	        });

			function toggleChevron(e) {
		    $(e.target)
		        .prev('.panel-heading')
		        .find(".glyphicon")
		        .toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
			}
			$("#accordion").on("show.bs.collapse", toggleChevron);
			$("#accordion").on("hide.bs.collapse", toggleChevron);
		});

In the above code i have bind the .show.bs.collapse and .hide.bs.collapse event with the accordion using on() function.

Whenever the accordion shows or hides togglechevron() is called. This function gets an argument as event object which is "<div class="panel-group">" element.

In the function body $(e.target) selects the div element which is "<div class="panel-collapse collapse">". Then with Jquery traversing i find the targeted element on which i have to change the icon which is in case here is <span> with .glyphicon class.

On this element i have toggled between the .glyphicon-chevron-up and .glyphicon-chevron-down class. Which are Hafling Glyphicons.

I have also changed the background-color of the heading for additional effect.

2.) Using CSS:

There is slight change in the accordion HTML here i.e., instead of providing icons in the <span> we will provide them using CSS.

<span class="glyphicon glyphicon-chevron-up pull-right"></span>

So remove the above line from the accordion html.

Now here is the css

.panel-heading .accordion-toggle:after {
   /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content:"\e114"; 
    float: right;        
	    
}
 .panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content:"\e113"; 
}

Now what is happening here is that i have used a "pseudo-class"  :after here in which font-family is specified "Glyphicons Halflings", and then the icon is specified by using the content property which conatins a unicode hex entity.

Because the hex entity is inside a style tag, it must be prepended with an escaped backslash, making it \e114 or \e113.

The icon is changed when the a.accordion-toggle element is along with .collapsed class. Here hex code is changed.

Thats it.