Toggle a single class in a group

Question

I want to toggle plus / minus icons on click on an accordian menu, the code I have at the moment changes all of the icons, how do I only switch the one which is clicked? Thanks.

HTML:

<a href="#collapseOne" data-parent="#accordion" data-toggle="collapse"><div class="panel-heading prod-panel-heading">
  <h4 class="panel-title">Compare Prices <b class="prod-ico glyphicon glyphicon-minus-sign"></b></h4>
</div></a>

jQuery:

// toggle product tab icons
$(".prod-panel-heading").live("click", function() {

   $(".prod-ico").toggleClass("glyphicon-minus-sign").toggleClass("glyphicon-plus-sign");  

}); 

Answer 1

Try this:

$(".prod-panel-heading").on("click", function() {

   $(".prod-ico", this).toggleClass("glyphicon-minus-sign").toggleClass("glyphicon-plus-sign");  

}); 

Adding this after the class selector will point to all the classes belonging to the class you add a function to. Without it, you point to all the classes of the entire page.