Ändern Sie Schriftart Awesome Icon auf Klicken Sie auf, aber zurück zur ursprünglichen Symbol, wenn das nächste Element geklickt wird

Ich bin mit Bootstrap-3-Panel und angefügt haben die Font-Awesome Plus-und Minus-Symbole, um die panel-Elemente. Ich bin auf der Suche nach einer Möglichkeit mit Jquery zu ändern, das plus zu einem minus "onClick", dann, wenn ein anderes Fenster geklickt wird ich will das minus-Symbol, um wieder plus.

Ich habe experimentiert mit einigen Jquery und haben nahe kommen. Ich denke, ich könnte nur etwas fehlt einfach hier. Es scheint gut zu funktionieren für ein paar Klicks, dann beginnt es verwirrend, die Klasse zu wechseln, zurück. Mein 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>&nbsp;&nbsp;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>&nbsp;&nbsp;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>&nbsp;&nbsp;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>

Und meine Jquery sieht wie folgt aus:

//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')
 });

Wie Sie sehen können, bin ich mit klicken Sie auf eine Funktion, und die Unschärfe auf den nächsten als Ereignis-Listener. Was mache ich hier falsch? Ich habe eine JSFIDDLE einrichten zu erläutern mein Problem.

Vielen Dank im Voraus für jede Hilfe.

Update: Shivali Patel Antwort, die für mich gearbeitet:

$('.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')
});

Er erstellt eine variable basierend auf den Zusammenbruch und verwendet addClass und removeClass zusätzlich zu den toggleClass Veranstaltungen. Tolle Arbeit, Shivali.