THE WORLD'S LARGEST WEB DEVELOPER SITE

How TO - Toggle Class


Toggle between adding and removing a class name from an element with JavaScript.


Click the button to toggle class name!

Toggle Class

Step 1) Add HTML:

Example

<button onclick="myFunction()">Try it</button>

<div id="myDIV">
  This is a DIV element.
</div>


Step 2) Add CSS:

Add a class name to toggle:

Example

.mystyle {
    width: 100%;
    padding: 25px;
    background-color: coral;
    color: white;
    font-size: 25px;
}

Step 3) Add JavaScript:

Get the <div> element with id="myDIV" and toggle between the "mystyle" class:

Example

function myFunction() {
    var x = document.getElementById('myDIV');
    x.classList.toggle("mystyle");
}
Try it Yourself »

Cross-browser solution

Note: The classList property is not supported in Internet Explorer 9. The following example uses a cross-browser solution/fallback code for IE9:

Example

var x = document.getElementById("myDIV");

if (x.classList) {
    x.classList.toggle("mystyle");
} else {
    // For IE9
    var classes = x.className.split(" ");
    var i = classes.indexOf("mystyle");

    if (i >= 0)
        classes.splice(i, 1);
    else
        classes.push("mystyle");
        x.className = classes.join(" ");
}
Try it Yourself »

Tip: Learn more about the classList property in our JavaScript Reference.