How to toggle font awesome icon on click?

Question

I am using font awesome 'plus' icon on expandable categories list items. When they are in expanded state i want to show a 'minus' sign'

HTML

<ul id="category-tabs">     <li><a href="javascript:void"><i class="fa fa-fw"></i>Category 1</a>         <ul>             <li><a href="javascript:void">item 1</a></li>             <li><a href="javascript:void">item 2</a></li>             <li><a href="javascript:void">item 3</a></li>         </ul>     </li> </ul> 

Jquery

$('#category-tabs li a').click(function(){     $(this).next('ul').slideToggle('500'); }); 

Answer 1

You can toggle the class of the i element within the clicked anchor like

<i class="fa fa-plus-circle"></i> 

then

$('#category-tabs li a').click(function(){     $(this).next('ul').slideToggle('500');     $(this).find('i').toggleClass('fa-plus-circle fa-minus-circle') }); 

Demo: Fiddle

Answer 2

Simply call jQuery's toggleClass() on the i element contained within your a element(s) to toggle either the plus and minus icons:

...click(function() {     $(this).find('i').toggleClass('fa-minus-circle fa-plus-circle'); }); 

Note that this assumes that a class of fa-plus-circle is added to your i element by default.

JSFiddle demo.