jQuery toggleClass() Method — Toggle CSS Classes

What Is toggleClass()?

.toggleClass(className) adds a CSS class when it is missing and removes it when it is present (since jQuery 1.0). Optional state forces add/remove (1.3+); arrays work since 3.3.

$("div").toggleClass("highlight")           // flip
$("div").toggleClass("highlight", true)     // force on
$("div").toggleClass("a b")                 // each name flips
$("div").toggleClass(["a", "b"])            // array (3.3+)

// true  → like .addClass()
// false → like .removeClass()

How to Use toggleClass()

Select elements, pass class names, optionally force a boolean state.

1. Select the element(s) with a jQuery selector.
2. Call .toggleClass("name") — or a space-separated list / array.
3. Optional: pass true/false as the second argument to force on/off.
4. Chain freely — .toggleClass() returns the same jQuery object.

Pseudocode

function toggleClass(selection, names, state):
    for each el in selection:
        classes = resolve names (string | array | function)
        for each class in classes:
            if state is true:
                add class
            else if state is false:
                remove class
            else if el has class:
                remove class
            else:
                add class
    return selection

Cheat Sheet

Keep these facts handy when flipping classes.

Live Preview

Flip classes on a sample element and watch the class attribute update.

class="tumble"

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

$("p").on("click", function () {
  $(this).toggleClass("highlight");
  console.log(this.className);
});
// first click  → "… highlight"
// second click → highlight removed

after 1st click: highlight
after 2nd click: (empty)

var count = 0;
$("p").on("click", function () {
  count++;
  $(this).toggleClass("highlight", count % 3 === 0);
  console.log(count, this.className);
});
// clicks 1–2 → highlight off
// click 3    → highlight on

1 (empty)
2 (empty)
3 highlight

var $box = $("<div class='a'></div>");
$box.toggleClass("a b");
console.log($box.attr("class"));  // "b"

$box.toggleClass(["a", "b"]);
console.log($box.attr("class"));  // "a"

b
a

$("div.foo").toggleClass(function () {
  if ($(this).parent().is(".bar")) {
    return "happy";
  }
  return "sad";
});
console.log($("div.foo").attr("class"));

foo happy

Performance Notes

Class toggles are inexpensive. Prefer classes over frequent .css() writes when styles live in a stylesheet.

Key Takeaways