Jquery - addClass and removeClass not working

Question

I tried to switch the class from an i tag. First I tried it by using Jquery UI's switchClass like this:

$( "#sidenavIcon" ).switchClass('fa-angle-double-right', 'fa-angle-double-left');

This was not working. I discovered that someone else also had a problem with switchClass and he was adviced to use removeClass and addClass instead, which worked for him.

However, for me it does not work, and I am confused now.

$(document).ready(
  function() {
    $("#sidenav").on("click", function() {
      $("#sidenavIcon").addClass('fa-angle-double-right').removeClass('fa-angle-double-left');
    });
  }
);

#sidenav {
  background-color: #333333;
  color: white;
  height: 100vh;
  width: 10vw;
  position: relative;
}

#sidenav:hover {
  cursor: pointer;
}

#sidenavIconWrap {
  font-size: 50px;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#sidenavIcon {
  color: white;
  font-size: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="sidenav">
  <div id="sidenavIconWrap">
    <i id=sidenavIcon" class="fa fa-angle-double-left" aria-hidden="true"></i>
 </div>
</div>

UPDATE:

It was indeed because of the missing ". I trusted PhpStorm to find this and point it out... I learned: never trust your IDE, even if you have a expensive one.

SO, now it's working now? – Rana Ghosh Apr 06 '17 at 09:56 — Rana Ghosh, Apr 06 '17 at 09:56

Neil · Accepted Answer · 2017-04-06T10:06:32.177

You were missing a " in <i id=sidenavIcon". It worked after I changed that. If you wan tit to toggle, go ahead and switch both addClass and removeClass with toggleClass.

$(document).ready(
  function() {
    $("#sidenav").on("click", function() {
      $("#sidenavIcon").toggleClass('fa-angle-double-right').toggleClass('fa-angle-double-left');
    });
  }
);

#sidenav {
  background-color: #333333;
  color: white;
  height: 100vh;
  width: 10vw;
  position: relative;
}

#sidenav:hover {
  cursor: pointer;
}

#sidenavIconWrap {
  font-size: 50px;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#sidenavIcon {
  color: white;
  font-size: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="sidenav">
  <div id="sidenavIconWrap">
    <i id="sidenavIcon" class="fa fa-angle-double-left" aria-hidden="true"></i>
  </div>
</div>

Thank you very much, PhpStorm was not pointing out that the `"` is missing as you can see in the screenshot, so I did not noticed it. — Black, Apr 06 '17 at 09:55
@AlivetoDie didn't get the indication that they wanted `toggleClass`. I updated it. — Neil, Apr 06 '17 at 10:05

score 2 · Answer 2 · answered Apr 06 '17 at 09:55

You just missed one double quote in your HTML, please follow below:
You have writen id=sidenavIcon", but you should write id="sidenavIcon"

<div id="sidenav">
    <div id="sidenavIconWrap">
        <i id="sidenavIcon" class="fa fa-angle-double-left" aria-hidden="true"></i>
    </div>
</div>

score 2 · Answer 3 · answered Apr 06 '17 at 10:01

2

You forgot to add an opening " in

<i id=sidenavIcon">

you can check it like this :

document.getElementById("sidenavIcon")

returns null

document.getElementById("sidenavIcon\"")

returns your div element.

So currently youe Id is sidenavIcon"

answered Apr 06 '17 at 10:01

Rohit Agrawal

1,496
9
20

RAJNIK PATEL · Answer 4 · 2017-04-06T09:59:14.523

Try this solution it's work smoothly

replace id=sidenavIcon" with id="sidenavIcon"

$(document).ready(function () {
    $("#sidenav").on("click", function () {
        if ($("#sidenavIcon").hasClass("fa-angle-double-right")) {
            $("#sidenavIcon").removeClass('fa-angle-double-right').addClass('fa-angle-double-left');
        }
        else {
            $("#sidenavIcon").addClass('fa-angle-double-right').removeClass('fa-angle-double-left');
        }
    });
});

#sidenav {
    background-color: #333333;
    color: white;
    height: 100vh;
    width: 10vw;
    position: relative;
}
#sidenav:hover {
 cursor: pointer;
}

#sidenavIconWrap {
 font-size: 50px;
 color: white;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

#sidenavIcon {
    color: white;
    font-size: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="sidenav">
 <div id="sidenavIconWrap">
  <i id="sidenavIcon" class="fa fa-angle-double-left" aria-hidden="true"></i>
 </div>
</div>

score 0 · Answer 5 · answered Apr 06 '17 at 10:05

jQuery: use toggleClass(); instead of switchClass() or add or remove class. HTML: Add the miss " before id= sidenavIcon"

$(document).ready(function() {

$("#sidenav").on("click", function() {

  $("#sidenavIcon").toggleClass('fa-angle-double-right fa-angle-double-left');
});
  });

#sidenav {
    background-color: #333333;
    color: white;
    height: 100vh;
    width: 10vw;
    position: relative;
}
#sidenav:hover {
 cursor: pointer;
}

#sidenavIconWrap {
 font-size: 50px;
 color: white;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

#sidenavIcon {
    color: white;
    font-size: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="sidenav">
 <div id="sidenavIconWrap">
  <i id="sidenavIcon" class="fa fa-angle-double-left" aria-hidden="true"></i>
 </div>
</div>

Jquery - addClass and removeClass not working

5 Answers5