Change Font Awesome OnClick

by tzhben

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<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">
                <p>Panel body text 3</p>
        ...

CSS

.fa-plus-square-o {
vertical-align: middle;
}
.fa-minus-square-o {
vertical-align: middle;
}
a.faq-links {
font-size: 20px;
}
.faq-links:hover {
text-decoration: none;
}
.faq-links:focus {
text-decoration: none;
}

JavaScript

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