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>

Alex Char · Answer 1 · 2015-10-29T11:41:55.803

.fa is not sibling but children element of .menuSlide so .next() is not correct. You can use .find() and .hasClass() instead:

$(".menuSlide").click(function() {
  if ($(this).find(".fa").hasClass("fa-minus")) {
    $(this).find(".fa").removeClass("fa-minus");
    $(this).find(".fa").addClass("fa-plus");
  } else {
    $(this).find(".fa").removeClass("fa-plus");
    $(this).find(".fa").addClass("fa-minus");
  }
});

.fa-minus:before {
  content: "-";
}
.fa-plus:before {
  content: "+";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 />

ghybs · Accepted Answer · 2015-10-29T11:41:29.993

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

score 2 · Answer 3 · answered Oct 29 '15 at 11:42

you are using next() it returns the next sibling element of the selected element. Sibling elements are elements that share the same parent

you need to use find() it returns descendant elements of the selected element. A descendant is a child, grandchild, great-grandchild, and so on.

$(".menuSlide").click(function(){
            if($(this).find(".fa").attr("class") == "fa fa-minus"){
              $(this).find(".fa").removeClass("fa-minus");
               $(this).find(".fa").addClass("fa-plus");
           }
           else{
               $(this).find(".fa").removeClass("fa-plus");
               $(this).find(".fa").addClass("fa-minus");
           }
        });

here the fiddle

Change class name in two class i element

3 Answers3