Learn
Similar to other effects methods, you can use a toggle method instead of chaining the .addClass() and .removeClass() methods together.
The .toggleClass() method adds a class if an element does not already have it, and removes it if an element does already have it. Its syntax looks like:
In the example above:
.toggleClass()is called on.example-classelements..toggleClass()will add the'active'class to.example-classelements if they do not have it already..toggleClass()will remove the'active'class from.example-classelements if they do have it already.
Instructions
1.
In main.js we changed the mouse enter event to a click event so you can see the changes that are caused by the .toggleClass() method below.
Let’s use .toggleClass() to add or remove the hide class from the navigation menu element.
2.
Use .toggleClass() to add and remove the button-active class from the menu button.
Take this course for free
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.