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:
Toggle between adding a class name to the div element with id="myDIV" (in this example we use a button to toggle the class name).
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 element = document.getElementById("myDIV");
element.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 element = document.getElementById("myDIV");
if (element.classList) {
element.classList.toggle("mystyle");
} else {
// For IE9
var classes = element.className.split(" ");
var i =
classes.indexOf("mystyle");
if (i >= 0)
classes.splice(i, 1);
else
classes.push("mystyle");
element.className = classes.join(" ");
}
Try it Yourself »
Tip: Also see How To Add A Class.
Tip: Also see How To Remove A Class.
Tip: Learn more about the classList property in our JavaScript Reference.
