How to deactivate a class using jquery

Question

I am currently working on a new header for my website containing 2 seperate dropdown <nav> elements, one of which is a hamburger menu that turns into a X when clicked upon, by toggling a class.

Through jquery i made it so that when one dropdown menu is activated, the other one is hidden (if it was active beforehand).

The problem is that i can't seem to figure out how to disable the class that makes the hamburger menu into an X. Take a look at this JSFiddle to see it.

(Try clicking on the 3 bars once, and thereafter on the grey button twice to see it)

The Jquery that toggles the class can be seen on line 27.

-Edit: The .class that is toggled can be found on line 110 in the css.

When clicking upon #prod-toggle it should be deactivated, i have tried that using removeClass(), but i can't get the targeting right. Can anyone tell me how this could be done?

Answer 1

Use this :

  $("#element id").removeClass();

Calling removeClass with no parameters will remove all of the item's classes.

You can also use (but is not necessarily recommended, the correct way is the one above):

      $("#element id").removeAttr('class');
      $("#element id").attr('class', '');
      $('#element id')[0].className = '';

If you didn't want to use jquery you can use java script:

    document.getElementById('item').className = '';