DOMTokenList: toggle() method
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Thetoggle() method of theDOMTokenList interfaceremoves an existing token from the list and returnsfalse.If the token doesn't exist it's added and the function returnstrue.
Syntax
toggle(token)toggle(token, force)Parameters
tokenA string representing the token you want to toggle.
forceOptionalIf included, turns the toggle into a one way-only operation.If set to
false, thentokenwillonly be removed, but not added.If set totrue, thentokenwillonly be added, but not removed.
Return value
A boolean value,true orfalse, indicating whethertoken is in thelist after the call or not.
Examples
Toggling a class on click
In the following example we retrieve the list of classes set on a<span> element as aDOMTokenList usingElement.classList. We then replace a token in the list, and write thelist into the<span>'sNode.textContent.
First, the HTML:
<span>classList is 'a b'</span>Now the #"span");const classes = span.classList;span.addEventListener("click", () => { const result = classes.toggle("c"); span.textContent = `'c' ${ result ? "added" : "removed" }; classList is now "${classes}".`;});
The output looks like this and it will change each time you click on the text:
Setting the force parameter
The second parameter can be used to determine whether the class is included or not. This example would include the 'c' class only if the browser window is over 1000 pixels wide:
span.classList.toggle("c", window.innerWidth > 1000);Specifications
| Specification |
|---|
| DOM # ref-for-dom-domtokenlist-toggle① |