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

Solution 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

Solution 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.

Solution 3

You can change the code by using class definition for the i element:

<a href="javascript:void"><i class="fa fa-plus-circle"></i>Category 1</a>

Then you can switch the classes rapresenting the plus/minus state using toggleClass with multiple classes:

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

Demo: http://jsfiddle.net/Zcn2u/

Solution 4

Generally and simply it works like this:

<script>
            $(document).ready(function () {
                $('i').click(function () {
                    $(this).toggleClass('fa-plus-square fa-minus-square');
                });
            });
</script>

View more solutions

Comments

[AKS]

The changes are working with href remain same, however say for MVC if one call view to display the content the menu icon is not changes( or rather it change and refresh back to original) . How to make it persist? The example that worked <li class="checkConfirm"><a href="javascript:void"><i class=" fa fa-check"></i>Check or Uncheck</a></li> and the below that didn't worked <li class="checkConfirm"><a href="@Url.Action("Index", "Home")"><i class=" fa fa-check"></i>Check or Uncheck</a></li>

[Iosu S.]

4 years later and still useful :-) just to note that if you're using the svg graphics, the 'i' element will be replaced with an 'svg' so the toggleClass needs to be applied to $(this).find('svg') instead of 'i'

[Adyyda]

This works ok if you have only one line. But, if you have multiple lines with <i class="fa fa-plus-circle"> there is a issue. You click on one and icon change (ok). If you click on another , the icon from the first one does not reset to initial value. Any way to prevent this? Thanks

[JMJ]

@Adyyda That's a different wish. if you want to close the first list and change the first icon back to normal, it should call the same function for that event (closing the list). This solution here is just for the time that it is super manual and the person might open a lot of lists simultaneously .