Bootstrap accordion icons not working on collapsed states

Question

I am working on a accordion in Bootstrap V 3.37. I have icons on the accordion which change with open and closed states. When I the state set to collapse init works fine. But when I have the accordion with none of them accordions collapsed in the icons are not working properly.

The icons should be working as:

1. Arrow facing down on closed state
2. Arrow facing up on open state

My code is as follows so far:

HTML Structure

<!-- Panel list accordion -->
<div class="panel-group">
      <div class="panel-heading-one panel-main-heading-one">
         <h4 class="panel-title panel-main-title">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
               <img src="../images/image.svg" class="panel-icon">
               <p>Title here</p>
            </a>
         </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse">
         <div class="panel-body panel-bodymain-one">
            <p>Text body here</p>
         </div>
      </div>
            <div class="panel-heading-one panel-main-heading-one">
         <h4 class="panel-title panel-main-title">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
               <img src="../images/image.svg" class="panel-icon">
               <p>Title here</p>
            </a>
         </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse">
         <div class="panel-body panel-bodymain-one">
            <p>Title body here</p>
         </div>
      </div>
            <div class="panel-heading-one panel-main-heading-one">
         <h4 class="panel-title panel-main-title">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
               <img src="../images/image.svg" class="panel-icon">
               <p>Title here</p>
            </a>
         </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse">
         <div class="panel-body panel-bodymain-one">
            <p>Text body here</p>
         </div>
      </div>
   </div>
</div>
<!-- End panel list accordion -->

CSS

.panel-heading-one .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';
    content: "\e113"; 
    float: right;        
    color: #ffffff;         
    height: 24px;
    width: 40px;
    background-color: #000000;
}

.panel-heading-one .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e114";
}

Screenshots attached also.

Closed state - still point up:

Open state is fine as it points up:

Any help would be great.

Answer 1

Change your css to:

.panel-heading-one .accordion-toggle:after{
    font-family: 'Glyphicons Halflings';
    content: "\e114"; 
    float: right;        
    color: #ffffff;         
    height: 24px;
    width: 40px;
    background-color: #000000;
}

.panel-heading-one .accordion-toggle[aria-expanded="true"]:after {
        /* symbol for "opening" panels */
        content: "\e113";
    }

.panel-heading-one .accordion-toggle[aria-expanded="false"]:after {
    /* symbol for "collapsed" panels */
    content: "\e114";
}

And it will work perfectly.

Extra: In your accordion you have used same href='#collapseThree' for last and second last item. When you will click on last element, it will open second last item. So change your href in last element.