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

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

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

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

Add a class name to toggle:

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

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

function myFunction() {
var element = document.getElementById("myDIV");
element.classList.toggle("mystyle");
}

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.