JavaScript Toggle Class In 2 Different Ways

In this article, you will learn how JavaScript toggle class in 2 different ways with various examples. Like toggle class onclick, toggle class on hover, toggling multiple classes, etc.

Toggling class means to add a class to an element if it doesn't have it, or to remove it if it does. For example, you want an element to be active when you click it and again deactivate it when you click it again.

You can increase user experience by changing the look of an element by adding or removing a class. For this, you can use the approach of toggling a class on an element using pure JavaScript.

Table of contents

1. JavaScript Toggle Class
   1. Using classList.toggle()
   2. By manual toggle process
2. Javascript toggle class multiple elements
3. Javascript toggle class onclick
4. Javascript toggle class on hover

JavaScript Toggle Class

A class of an HTML element defines the look of the element. A class holds a set of CSS properties when applied to an element all those properties will be applied to that element.

Toggling a class is a process of adding or removing a class from an element, just like switching on or off a light bulb.

We are going to see 2 different ways how the Javascript toggle class works.

1. Using classList.toggle() method
2. By using combination of classList.contains(), classList.add() and classList.remove() methods

1. Using classList.toggle() Method

The classList property of an element is a DOMTokenList object. It is a list of all the classes of an element. It is a read-only property.

The classList object has a toggle() method which can be used to add or remove a class from an element.

Here is the syntax:

classList.toggle(className);

The toggle() method takes a class name as an argument and if the class is present in the element, it will be removed, otherwise it will be added.

The following example shows how to use classList.toggle() method to toggle a class on an element.

<button onclick="toggleClass()">Click me</button>
<p class="box">This is a paragraph.</p>

<script>
  // using classList.toggle() method
  const para = document.querySelector('.box');

  function toggleClass() {
    // toggle class
    para.classList.toggle('box');
  }
</script>

Output:

2. By using other methods of classList

Apart from toggle() method, there are other methods of classList object:

1. contains() - It checks if the element has a class, if it does it returns true, otherwise it returns false.
2. add() - It adds a class to an element.
3. remove() - It removes a class from an element.

So we can use contain() method to check if the element has a class if it does not have then use add() method to add a class to an element and if it has then use remove() method to remove the class from an element. This will create a toggle function on the element.

Here is a working example of this.

<button onclick="toggleClass()">Click me</button>
<p class="box">This is a paragraph.</p>
<script>
  const para = document.querySelector('.box');

  // check if the class is present
  // if it is present, remove it
  // if it is not present, add it
  function toggleClass() {
    if (para.classList.contains('box')) {
      para.classList.remove('box');
    } else {
      para.classList.add('box');
    }
  }
</script>

Output:

JavaScript Toggle Class Multiple Elements

You can also toggle class on multiple element at once. For this target multiple elements and use the toggle() method.

To toggle a class on multiple elements select those elements and apply the toggle method on each element to handle their corresponding class.

Look at the example below.

<button onclick="toggleClass()">Click me</button>
<p class="a">Element "a"</p>
<p class="b">Element "b"</p>

<script>
  var a = document.querySelector(".a");
  var b = document.querySelector(".b");

  // toggle class on multiple element
  function toggleClass() {
    a.classList.toggle("a");
    b.classList.toggle("b");
  }
</script>

Output:

JavaScript Toggle Class Onclick

To toggle class on an element when you click on it, you can use onclick event on the element.

You can use the addEventListener method to add an event listener to the element.

Here is a working example of onclick event.

<p class="box" id="box">Click on this box.</p>

<script>
  var para = document.querySelector("#box");

  // toggle class on click
  para.addEventListener("click", function() {
    para.classList.toggle("box");
  });
</script>

Output:

JavaScript Toggle Class On Hover

To create a toggle effect on hover add onmouseover and onmouseout event to the element to toggle class on mouseover and mouseout.

Here is the code snippet for this.

<p class="box" id="box">This is box.</p>

<script>
  var para = document.querySelector("#box");

  // toggle class on hover
  para.addEventListener("mouseover", function() {
    para.classList.toggle("box");
  });
  para.addEventListener("mouseout", function() {
    para.classList.toggle("box");
  });
</script>

Output:

Conclusion

You have seen 2 different methods how javascript toggle class on an element. Using toggle you can create theme like effect on the webpage.