I'm using Bootstrap 3 Panel's and have appended the Font Awesome Plus and Minus icons to the panel items. I'm looking for a way using Jquery to change the plus to a minus "onClick", then when another panel item is clicked I want that minus icon to change back to plus.
I have been experimenting with some Jquery and have come close. I think I might just be missing something simple here. It seems to work fine for a few clicks, then it starts confusing which class to switch back to. My HTML:
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFive">
<h4 class="panel-title"><a class="collapsed faq-links" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive"><i class="fa fa-plus-square-o fa-2x"></i> Panel Title 1</a></h4>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<p>Panel body text</p>
</div>
</div>
</div>
<br />
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading13">
<h4 class="panel-title"><a class="collapsed faq-links" data-toggle="collapse" data-parent="#accordion" href="#collapse13" aria-expanded="false" aria-controls="collapse13"><i class="fa fa-plus-square-o fa-2x"></i> Panel Title 2</a></h4>
</div>
<div id="collapse13" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading13">
<div class="panel-body">
<p>Panel body text 2</p>
</div>
</div>
</div>
<br />
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title"><a class="collapsed faq-links" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"><i class="fa fa-plus-square-o fa-2x"></i> Panel Title 3</a></h4>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<p>Panel body text 3</p>
</div>
</div>
</div>
</div>
And my Jquery looks like this:
//TOGGLE FONT AWESOME ON CLICK
$('.faq-links').click(function(){
$(this).find('i').toggleClass('fa-plus-square-o fa-2x fa-minus-square-o fa-2x')
});
$('.faq-links').blur(function(){
$(this).find('i').toggleClass('fa-plus-square-o fa-2x fa-minus-square-o fa-2x')
});
As you can see, I'm using click on one function, and blur on the next as the event listeners. What am I doing wrong here? I have a JSFIDDLE set up to further explain my issue.
Update: Shivali Patel's answer that worked for me:
$('.faq-links').click(function(){
var collapsed=$(this).find('i').hasClass('fa-plus-square-o');
$('.faq-links').find('i').removeClass('fa-minus-square-o');
$('.faq-links').find('i').addClass('fa-plus-square-o');
if(collapsed)
$(this).find('i').toggleClass('fa-plus-square-o fa-2x fa-minus-square-o fa-2x')
});
He created a variable based on collapse and used addClass and removeClass in addition to the toggleClass events. Great work Shivali.
This is happening because of blur event
.
If you click outside of any accordion still blur event is called and changed the icons of relevant accordion.
Example here :
http://jsfiddle.net/t7jtnupu/2/