jQuery .toggleClass() Method

What You’ll Learn

The .toggleClass() method adds a CSS class when it is missing and removes it when present — one call flips stylesheet-driven styling on or off. This tutorial covers all API overloads (string, boolean state, array, callback, no-args), comparisons with .addClass(), .removeClass(), and .css(), and the official click-to-highlight pattern.

Introduction

Styling in modern web pages usually lives in CSS files — reusable class names like .active, .highlight, or .dark-theme that you flip on elements at runtime. When JavaScript needs to switch a style on or off without tracking whether the class is already there, jQuery provides .toggleClass().

Available since jQuery 1.0, .toggleClass() updates the class attribute on each matched element. It adds the specified class when missing and removes it when present — a single method for binary on/off states. For always-on or always-off changes, use .addClass() or .removeClass(). For inline property values, use .css() instead.

Understanding the .toggleClass() Method

Given a jQuery object representing one or more DOM elements, .toggleClass() flips the specified class name(s) on each element. If the class is absent, jQuery adds it and stylesheet rules apply. If the class is already there, jQuery removes it and those rules stop applying — no need to check .hasClass() first.

Think of classes as labels you stick onto elements. .addClass() always adds more labels; .removeClass() always peels them off; .toggleClass() checks each label and flips it. For exclusive state switches across a group — only one tab active — chain .removeClass() then .addClass() instead.

📝 Syntax

jQuery .toggleClass() accepts several argument forms:

1. String — toggle one or more class names (since 1.0)

.toggleClass( className )

• className — a string of one or more space-separated CSS class names. Each listed class is added if missing or removed if present.

2. String with boolean state (since 1.3)

.toggleClass( className, state )

• className — the CSS class name(s) to add or remove.
• state — a boolean: true adds the class (like .addClass()); false removes it (like .removeClass()).

3. Array — list of class names (since 3.3)

.toggleClass( [ classNames ] )

• classNames — an array of strings; jQuery toggles every entry on each element.

4. Array with boolean state (since 3.3)

.toggleClass( [ classNames ], state )

• state — when true, all listed classes are added; when false, all are removed.

5. Function — per-element class name(s) (since 1.4)

.toggleClass( function( index, className, state ) {
  // return className string
} [, state ] )

• index — zero-based index of the element within the matched set.
• className — the element’s current class attribute value (or empty string).
• state — whether the class is currently present (true) or absent (false).
• Return a string of class name(s) to toggle for that element. Optional outer state boolean forces add (true) or remove (false).

6. Function returning array (since 3.3)

The callback may return an array of class names instead of a space-separated string:

$( "li" ).toggleClass( function( index ) {
  return [ "item-" + index, "row-" + index ];
} );

7. No arguments — toggle all classes (since 1.4)

.toggleClass()

• With no arguments, jQuery toggles every class on each matched element on the first call — use carefully; prefer naming specific classes instead.

Return value

• The original jQuery object (for chaining) — not a new collection.

Official jQuery API click pattern

$( "p" ).on( "click", function() {
  $( this ).toggleClass( "highlight" );
} );

// Each click flips highlight on or off — no hasClass check needed

Examples Gallery

Examples 1–4 follow the official jQuery API documentation. Example 5 shows a practical dark-theme switch on body. Use DevTools or the Try-it links to run each snippet in the browser.

$( "p" ).on( "click", function() {
  $( this ).toggleClass( "highlight" );
} );

First click on a paragraph → class "highlight" added (yellow background)

Second click → class "highlight" removed

Other classes (e.g. "blue") → unchanged throughout

var count = 0;

$( "p" ).on( "click", function() {
  count++;
  $( this ).toggleClass( "highlight", count % 3 === 0 );
} );

Clicks 1, 2 → highlight removed (state false)

Click 3 → highlight added (state true)

Clicks 4, 5 → highlight removed again

Pattern repeats every third click

$( "button" ).on( "click", function() {
  var tc = this.className;
  $( "div" ).toggleClass( tc );
} );

Button "toggle a" → class "a" flipped on all divs

Button "toggle a b" → classes "a" and "b" flipped together

Each class toggled independently — present removed, absent added

Reset button clears all classes via .attr("class", "")

$( "#box" ).on( "click", function() {
  $( this ).toggleClass( [ "bold", "italic" ] );
} );

First click → bold and italic added to #box

Second click → both classes removed

Same flip behavior as a space-separated string

Useful when class names come from a variable or API response

$( "#themeBtn" ).on( "click", function() {
  $( "body" ).toggleClass( "dark-theme" );
} );

First click → body gains class "dark-theme" (dark background, light text)

Second click → "dark-theme" removed — page returns to light mode

CSS handles all visual changes — JavaScript only flips one class

🚀 Common Use Cases

• Click-to-highlight — $(this).toggleClass("selected") on table rows or list items.
• Panel open/close — $(".panel").toggleClass("open") to show or hide with CSS transitions.
• Dark mode switch — $("body").toggleClass("dark-theme") on a button click.
• Conditional highlight — $(el).toggleClass("error", !isValid) with boolean state.
• Multi-class styling — $(box).toggleClass("bold italic") or array form for computed names.
• Exclusive tab state — prefer .removeClass("active").addClass("active") across siblings, not .toggleClass().

📝 Notes

• Available since jQuery 1.0 — boolean state argument since 1.3; callback since 1.4; no-args form since 1.4.
• Array argument supported since jQuery 3.3; callback may return array since 3.3.
• Calling .toggleClass() with no arguments toggles all classes on each element — use sparingly.
• .toggleClass(state) with only a boolean (no class name) was deprecated in jQuery 3.0 and removed in 4.0 — always pass a class name or callback.
• Before jQuery 1.12/2.2 used the className property; since 1.12/2.2 uses the class attribute — works on SVG and XML elements.
• For exclusive state across siblings (one active tab), use .removeClass() + .addClass() instead of .toggleClass().
• Returns the original jQuery object for chaining — e.g. .toggleClass("open").slideDown().

💡 Best Practices