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.

The toggle() method of the DOMTokenList interface removes an existing token from the list and returns false. If the token doesn't exist it's added and the function returns true.

Syntax

js
toggle(token)
toggle(token, force)

Parameters

token

A string representing the token you want to toggle.

force Optional

If included, turns the toggle into a one way-only operation. If set to false, then token will only be removed, but not added. If set to true, then token will only be added, but not removed.

Return value

A boolean value, true or false, indicating whether token is in the list 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 a DOMTokenList using Element.classList. We then replace a token in the list, and write the list into the <span>'s Node.textContent.

First, the HTML:

html
<span class="a b">classList is 'a b'</span>

Now the JavaScript:

js
const span = document.querySelector("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:

js
span.classList.toggle("c", window.innerWidth > 1000);

Specifications

Specification
DOM
# ref-for-dom-domtokenlist-toggle①

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
toggle
force parameter

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support