How to Toggle an Element Class in JavaScript ?

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:

  • 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.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

  • Without Clicking the Button:

  • After Clicking the Button Once:

  • After Clicking the Button Twice:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.