Learn
Style Methods
.toggleClass()

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:

$('.example-class').toggleClass('active');

In the example above:

  • .toggleClass() is called on .example-class elements.
  • .toggleClass() will add the 'active' class to .example-class elements if they do not have it already.
  • .toggleClass() will remove the 'active' class from .example-class elements 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.

Folder Icon

Sign up to start coding

Already have an account?