Change class name in two class i element

Question

I need to change class on click, in <i> element, which has 2 classes. The first class is always "fa" and the second class "fa-minus" or "fa-plus". I need to change this second class from "minus" to "plus" and "plus" to "minus", depending on which class it already has. Would you mind to help me please? It doesn't work at all now

   <a href="#!"><div class="menuSlide">Products <i class="fa fa-minus"></i></div></a>

<a href="#!"><div class="menuSlide"> Multimedia <i class="fa fa-plus"></i></div></a><br /><br />

    <script>
        $(".menuSlide").click(function(){
           if($(this).next(".fa").attr("class") == "fa-minus"){
               $(this).next(".fa").removeClass("fa-minus");
               $(this).next(".fa").addClass("fa-plus");
           }
           else{
               $(this).next(".fa").removeClass("fa-plus");
               $(this).next(".fa").addClass("fa-minus");
           }
        });
    </script>

Answer 1

This is quite a basic use case. You should check jQuery hasClass instead of using a comparator on attribute "class", because the latter is actually a string that contains all the applied classes separated by a white space.

In the first place, you could even use jQuery toggleClass instead of having to try to implement a detection then a class removal and insertion.

So you end up with the code:

$(".menuSlide").click(function(){
    $(".fa", this).toggleClass("fa-minus fa-plus");
});