HTML DOMTokenList toggle()
❮ The DOMTokenList ObjectExamples
Toggle "myStyle" on and off:
const list = element.classList;
list.toggle("mywStyle");
Try it Yourself »
Add a "myStyle" class to an element:
const list = element.classList;
list.add("myStyle");
Try it Yourself »
Remove the "myStyle" class from an element:
const list = element.classList;
list.remove("myStyle");
Try it Yourself »
More examples below.
Definition and Usage
The add() method adds one (or more) tokens to a
DOMTokenList.
See Also:
Syntax
domtokenlist.toggle(token)
Parameters
| Parameter | Description |
| token | Required. The token to toggle. |
Return Value
| NONE |
More Examples
Add multiple classes to the an element:
element.classList.add("myStyle", "anotherClass", "thirdClass");
Try it Yourself »
Remove multiple classes from an element:
element.classList.remove("myStyle", "anotherClass", "thirdClass");
Try it Yourself »
Toggle between classes to create a dropdown button:
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
Try it Yourself »
Browser Support
domtokenlist.toggle() is a DOM Level 4 (2015) feature.
It is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
domtokenlist.toggle() is not supported in Internet Explorer 11 (or earlier).
❮ The DOMTokenList Object
