Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to Toggle an Element Class in JavaScript ?

  • Difficulty Level : Easy
  • Last Updated : 16 Apr, 2020

Toggling the class means if there is no class name assigned to the element, then a class name can be assigned to it dynamically or if a certain class is already present, then it can be removed dynamically by just using the toggle() or by using contains(), add(), remove() methods of DOMTokenList object within JavaScript.

Properties of HTML elements being used:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

  • classList: This property returns the class name(s) of the element as a DOMTokenList object. This object has some well known methods including contains(), add(), remove(), toggle().
  • contains(): This method returns a boolean value indicating if a particular class name is present or not.
  • add(): This method is used to add one or more class names to an element.
  • remove(): This method is used to remove one or more class names from an element.
  • toggle(): This method belongs to DOMTokenList object, and is used to toggle between the classes

Method 1: By Using toggle() method: Let’s first make a template of the HTML file that includes a paragraph tag and a button tag. After that let’s apply some style for the class that is to be toggled. In our example, the class name is “paragraphClass” and button’s ID is “Button”. Copy this code inside the <head> of the html page.

<style>
    .paragraphClass {
        font-size: 30px;
        color: red;
    }

    #Button {
        margin-top: 15px;
    }
</style>

Now, let’s write the script for toggling the class. Following is the script, that is to be written within <head> of the html page. In this method, we will use the toggle() function for toggling the class names.



<script>
    function myFunc() {
        var para = document.getElementById("p");
        para.classList.toggle("paragraphClass");
    }
</script>

Example: Let’s get to the working example by combining all the concepts described above.




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Geeks for Geeks</title>
    <style>
        .paragraphClass {
            font-size: 30px;
            color: red;
        }
  
        #Button {
            margin-top: 15px;
        }
    </style>
  
    <script>
        function myFunc() {
            var para = document.getElementById("p");
            para.classList.toggle("paragraphClass");
        }
    </script>
</head>
  
<body>
    <p id="p">
        Click on the button to toggle
        between the class to see the
        effects 
    </p>
  
    <button id="Button" onclick="myFunc()">
        Click Me
    </button>
</body>
  
</html>

Output:

  • Without Clicking the Button:

  • After Clicking the Button Once:

  • After Clicking the Button Twice:

Method 2: By Using contains(), add() and remove() method: Let’s first make a template of the HTML file that includes a paragraph tag and a button tag. After that let’s apply some style for the class that is to be toggled. In our example, the class name is “paragraphClass” and button’s ID is “Button”. Copy this code inside the <head> of the html page.

<style>
    .paragraphClass {
        font-size: 30px;
        color: red;
    }

    #Button {
        margin-top: 15px;
    }
</style>

Now, let’s write the script for toggling the class. Following is the script, that is to be written within the <head> of the html page. In this method, we will use the contains(), add(), remove() method for toggling the class names. The trick here is that we will check whether a particular class is present or not using contains() method, and then we will add or remove the class names from the element using add() or remove() respectively.

<script>
function myFunc() {
    var para = document.getElementById("p");

    if(para.classList.contains("paragraphClass")) {
        para.classList.remove("paragraphClass");
    }
    else {
        para.classList.add("paragraphClass");
    }
}
</script>

Example: Let’s get to the working example by combining all the concepts described above.




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Geeks for Geeks</title>
    <style>
        .paragraphClass {
            font-size: 30px;
            color: red;
        }
  
        #Button {
            margin-top: 15px;
        }
    </style>
  
    <script>
        function myFunc() {
            var para = document.getElementById("p");
  
            if(para.classList.contains("paragraphClass")) {
                para.classList.remove("paragraphClass");
            }
            else {
                para.classList.add("paragraphClass");
            }
        }
    </script>
</head>
  
<body>
    <p id="p">
        Click on the button to toggle
        between the class to see the
        effects
    </p>
  
    <button id="Button" onclick="myFunc()">
        Click Me
    </button>
</body>
  
</html>

Output:

  • Without Clicking the Button:

  • After Clicking the Button Once:

  • After Clicking the Button Twice:




My Personal Notes arrow_drop_up
Recommended Articles
Page :