How to toggle class

Use JavaScript to toggle between adding and removing class names in elements.

Click the button to toggle the class name!

Toggle class

Step 1 - Add HTML:

When adding the class name to id="myDIV" toggle between div elements (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>

Step 2 - Add CSS:

Add a class name to toggle:

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

Step 3 - Add JavaScript:

get id="myDIV" the <div> element, and in "mystyle" Toggle between classes:

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

Try it yourself

Related pages

Tutorial:Como adicionar uma classe

Tutorial:Como remover uma classe

Manual de referência:Propriedade classList do elemento DOM HTML