---
title: "unicorn/prefer-classlist-toggle"
description: "Require `classList.toggle()` instead of choosing between `add()` and `remove()`"
# Generated by src/codegen/lint-rule-docs.ts. Do not edit below this line.
plugin: "unicorn"
aliases: []
kind: "suggestion"
category: "style"
default: "off"
fixable: "yes"
typeAware: false
deprecated: false
---

`classList.toggle(name, force)` adds the class if `force` is true and removes it if `force` is false. That's one call instead of an `if` and an `else` that repeat the element and the class name.

`--fix` rewrites the code to `toggle()`.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

```toml bunfig.toml
[lint.rules]
"unicorn/prefer-classlist-toggle" = "error" # or "warn"
```

{/* End of the generated section. */}

## Examples

Reported:

{/* bad {"count": 3} */}
```js
if (isOpen) {
  menu.classList.add("open");
} else {
  menu.classList.remove("open");
}

isOpen ? menu.classList.add("open") : menu.classList.remove("open");

menu.classList[isOpen ? "add" : "remove"]("open");
```

Not reported:

{/* good */}
```js
menu.classList.toggle("open", isOpen);
```

`toggle(name, undefined)` flips the class instead of removing it. If the condition can be `undefined`, pass `Boolean(isOpen)`.

The two calls must use the same element and the same class:

{/* good */}
```js
if (isOpen) {
  menu.classList.add("open");
} else {
  menu.classList.remove("closing");
}
```