DOMTokenList: toggle() method

The toggle() method of the {{domxref("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-nolint

toggle(token)
toggle(token, force)

Parameters

token
- : A string representing the token you want to toggle.
force {{optional_inline}}
- : 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 {{htmlelement("span")}} element as a DOMTokenList using {{domxref("Element.classList")}}. We then replace a token in the list, and write the list into the <span>'s {{domxref("Node.textContent")}}.

First, the HTML:

html

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

Now the JavaScript:

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:

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