jQuery Accordion change font awesome icon class on click

See more:

Javascript

jQuery

I have a question about a simple jQuery accordion I found.

I'd like to use Font Awesome icons to indicate the active/inactive state with plus and minus icons. In my JSFiddle you see the titles with plus icons. When you click on a title the "fa-plus" class needs to change to "fa-minus".

I already did some tests with add and removeClass, but I couldn't get it working. I'm really a jQuery/javascript noob! Hope you guys can help me out :-).

  <nav id="nav_why_us">
                	 <ul class="clearfix">
                     <li> <a onclick="displaySub(this.id)" id="mainMenu"> 
                     <span>Price</span><i style="float:right" class="fa fa-plus-circle"></i></a>
                      <ul class="dispNone abc">
                        <li> <a href="#"> General Information</a></li>
                        <li><a href="#"> Vehicle Specification</a></li>
                        <li><a href="#"> Purchase Information</a></li>
                        <li><a href="#"> Finance Information</a></li>
                        <li><a href="#"> Vehicle Warranty</a></li>
                        <li><a href="#"> License/Registration</a> </li>
                        <li><a href="#">Insurance Information</a> </li>
                        <li><a href="#">Parts Information</a></li>
                      </ul>
                    </li>
                    <li><a onclick="displaySub(this.id)" id="menu2"> <span>Body Styles</span><i style="float:right" class="fa fa-plus-circle"></i></a>
                       <ul class="dispNone abc">
                        <li><a href="Vms-NewFuelLog.html">New Fuel Log</a></li>
                        <li><a href="Vms- ViewFuelLog.html">View Fuel Log</a></li>
                        <li><a href="Vms-EditFuelEntry.html">Edit Fuel Log</a></li>
                        <li><a href="#">Remove Fuel Log</a></li>
                      </ul>
                    </li>
</ul>
</nav>

function displaySub(id)
{
	  

$('#'+id).addClass("has-sub");
			if($('#'+id).hasClass('has-sub'))
			{
				
			$('i').toggleClass('fa-plus-circle fa-minus-circle');
			}
			$('#'+id).next('ul').toggleClass('dispNone');
		return false;

}