change class names on Jquery .toggle(); Bootstrap Accordion

Question

I am using bootstraps accordion to show a list of questions and then when you click on a plus icon it slides down to reveal the answer. What I am trying to achieve is that when the accordion expands to reveal the answer change the plus icon to a minus ( i have a sprite made up) So far the image does not change

View

<div id="accordion" class="accordion in collapse">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a href="#collapseOne" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle collapsed">Question1</a>
    </div>
    <!--End of Accordion heading-->
    <div id="collapseOne" class="accordion-body collapse" style="height: 0px;">
      <div class="accordion-inner">Answer to Question 1.</div>
      <!--End of accordion Inner-->
    </div>
    <!--End of collapseOne-->
  </div>
  <!--End of accordion-group-->
</div>

CSS

.accordion .accordion-toggle, .toggle-box a {
background: url("/assets/collapse_btn.png") no-repeat scroll left 10px transparent;
color: #666666;
display: block;
font-size: 18px;
height: 25px;
line-height: 23px;
padding: 10px 20px 10px 40px;
}

.accordion a.collapsed, .toggle-box .collapsed {
background: url("/assets/collapse_btn.png") no-repeat scroll left -58px transparent;
}

I have this jquery to change the class upon toggle status

$('.accordion').collapse();
$('.accordion').on('shown', function () {
    var $aGroup = $('.accordion-group');
    $aGroup.find('.accordion-body').not(".in").prev('.accordion-heading').children("a").addClass('collapsed');

  })

But this does not work. My Jquery is limited to I have probably made some mistakes here. Could anyone point out qhat I have done wrong. I tried to put a fiddle together to make diagnosis easier but wouldnt pull the accordion js in?

Any help appreciated

Answer 1

Instead of toggling a .collapsed class (which I assume would have the plus icon since collapsed divs can be opened), you should use the plus icon as the default sprite and then add/remove a class called .opened instead. That .opened class would have the minus sign. Also, I think it would be easier to target the .accordion-body. Here's an example of how you could do it:

Script:

$('.accordion-body').on('show',function(){
     $(this).siblings('.accordion-heading').find('.accordion-toggle')
       .addClass('opened');
    });
$('.accordion-body').on('hide',function(){
     $(this).siblings('.accordion-heading').find('.accordion-toggle')
       .removeClass('opened');
 });

Style:

/* Class below should have plus sign */
.accordion-toggle {
    background: url("/assets/collapse_btn.png") no-repeat scroll left 10px transparent;
    color: #666666;
    display: block;
    font-size: 18px;
    height: 25px;
    line-height: 23px;
    padding: 10px 20px 10px 40px;
}
/* Class below should have minus sign */
.accordion-toggle.opened {
    background: url("/assets/collapse_btn.png") no-repeat scroll left -58px transparent; 
}

I have tested this code locally with my own plus/minus icons and it worked for me.

*If your class is just misnamed and .collapsed does have the minus, you could use collapsed instead of opened above.