jQuery hasClass() Method

The hasClass() method checks whether a selected element has a specific CSS class. It returns true if the class exists on the element, and false if it does not. This check lets you write conditional logic based on an element's current styling state.

Basic Syntax

$(selector).hasClass("className");

// Returns: true or false

Simple Example

HTML:
<div id="panel" class="box active">Content</div>

jQuery:
var result1 = $("#panel").hasClass("active");   // true
var result2 = $("#panel").hasClass("hidden");   // false
var result3 = $("#panel").hasClass("box");      // true

Diagram: hasClass() Check

  Element: <div class="card active featured">

  hasClass("card")     → true   ✓  (class exists)
  hasClass("active")   → true   ✓  (class exists)
  hasClass("featured") → true   ✓  (class exists)
  hasClass("hidden")   → false  ✗  (class does NOT exist)
  hasClass("primary")  → false  ✗  (class does NOT exist)

Using hasClass() in Conditional Logic

$(document).ready(function() {
    $("#toggleBtn").click(function() {
        if ($("#menu").hasClass("open")) {
            $("#menu").removeClass("open").addClass("closed");
            $(this).text("Open Menu");
        } else {
            $("#menu").removeClass("closed").addClass("open");
            $(this).text("Close Menu");
        }
    });
});

The button checks the menu's current class state before deciding what to do next.

hasClass() vs toggleClass()

When you need to switch a class on and off, toggleClass() is shorter. But hasClass() gives you a boolean value you can use in other parts of your code — for more complex decisions.

// Simple toggle (no decision needed):
$(".btn").click(function() {
    $(this).toggleClass("active");
});

// Complex decision with hasClass:
$(".btn").click(function() {
    if ($(this).hasClass("active")) {
        saveProgress();        // do something specific
        $(this).removeClass("active");
    } else {
        loadData();            // do something different
        $(this).addClass("active");
    }
});

hasClass() with Multiple Elements

When called on a set of multiple elements, hasClass() returns true if any of the elements has the class.

HTML:
<p class="note">Note 1</p>
<p>Regular paragraph</p>
<p class="note">Note 3</p>

jQuery:
$("p").hasClass("note");    // true (at least one <p> has class "note")

Practical: Form Submit Check

$(document).ready(function() {
    $("#agreeCheck").change(function() {
        if ($(this).hasClass("checked-box")) {
            $(this).removeClass("checked-box");
            $("#submitBtn").prop("disabled", true);
        } else {
            $(this).addClass("checked-box");
            $("#submitBtn").prop("disabled", false);
        }
    });
});

Practical: Dark Mode Toggle

$(document).ready(function() {
    $("#themeToggle").click(function() {
        if ($("body").hasClass("dark-mode")) {
            $("body").removeClass("dark-mode");
            $(this).text("Enable Dark Mode");
        } else {
            $("body").addClass("dark-mode");
            $(this).text("Enable Light Mode");
        }
    });
});

Diagram: Dark Mode Toggle Flow

  Page loads → body has no "dark-mode" class

  User clicks toggle:
  hasClass("dark-mode") → false
  → addClass("dark-mode")
  → button text: "Enable Light Mode"

  User clicks toggle again:
  hasClass("dark-mode") → true
  → removeClass("dark-mode")
  → button text: "Enable Dark Mode"

is() as an Alternative

The is() method also checks conditions and returns true/false. It works for classes too, but also accepts any selector.

// Equivalent:
$("div").hasClass("active")     → true/false
$("div").is(".active")          → true/false

// is() can do more:
$("input").is(":checked")       // check if checkbox is checked
$("p").is(":visible")           // check if paragraph is visible
$("li").is(":first-child")      // check position

Quick Summary

• hasClass("name") returns true if the element has that class, false if not.
• Use it inside if statements to make decisions based on element state.
• When used on multiple elements, returns true if any one of them has the class.
• Prefer toggleClass() for simple on/off class switching.
• Use hasClass() when your conditional logic needs the true/false value for something more than just toggling.

Accessibility Use Case

Use hasClass() to set ARIA attributes dynamically so screen readers always reflect the current state of expandable panels.

$(".panel-toggle").click(function() {
    var expanded = $(this).hasClass("open");
    $(this).attr("aria-expanded", !expanded).toggleClass("open");
});

hasClass() in Animations

Pair hasClass() with animations to choose different effects based on the current state of an element. This makes animations context-aware — an element opening plays one animation, and the same element closing plays the reverse.

$(".panel-header").click(function() {
    var $body = $(this).next(".panel-body");
    if ($body.hasClass("is-open")) {
        $body.slideUp(300).removeClass("is-open");
    } else {
        $body.slideDown(300).addClass("is-open");
    }
});

The is-open class serves two purposes: it tells jQuery which animation to run, and it lets CSS apply an open-state style to the panel simultaneously.