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

enter image description here

You would have to remove one class from the ` and add another. — Paulie_D, Apr 24 '14 at 10:42

score 92 · Accepted Answer · edited May 13 '23 at 13:08

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

See working example:

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<ul id="category-tabs">
  <li>
    <a href="javascript:void">
      <i class="fa fa-plus-circle"></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>

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
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' — Iosu S., Jan 09 '18 at 08:13

score 17 · Answer 2 · answered Apr 24 '14 at 10:44

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.

score 2 · Answer 3 · answered Apr 24 '14 at 10:50

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/

JMJ · Answer 4 · 2017-10-12T09:09:14.310

2

Generally and simply it works like this:

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

edited Oct 12 '17 at 09:09

answered Aug 23 '17 at 14:57

JMJ

2,034
2
16
17

This works ok if you have only one line. But, if you have multiple lines with – Adyyda Nov 30 '18 at 20:13
@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 . – JMJ Dec 03 '18 at 10:33

score 0 · Answer 5 · edited May 23 '17 at 11:47

0

There is another solution you can try by using only the css here is the answer i posted in another post: jQuery Accordion change font awesome icon class on click

edited May 23 '17 at 11:47

Community

1
1

answered Nov 30 '14 at 14:44

emilushi

280
7
16

score -1 · Answer 6 · answered Mar 21 '18 at 03:08

<ul id="category-tabs">
    <li><a href="javascript:void"><i class="fa fa-plus-circle"></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

$(document).ready(function() {
    $('li').click(function() {
      $('i').toggleClass('fa-plus-square fa-minus-square');
    });
  });

JSFiddle

How to toggle font awesome icon on click?

6 Answers6

Linked

Related