Adding and Removing Classes

Manipulating CSS classes is the recommended way to change styles with jQuery — it keeps your CSS in stylesheets and your logic in JavaScript.

addClass()

$(".box").addClass("active");
$("p").addClass("highlight large");  // Add multiple classes

removeClass()

$(".box").removeClass("active");
$("p").removeClass("highlight large");  // Remove multiple
$("p").removeClass();  // Remove ALL classes

toggleClass()

Add the class if it's missing, remove it if it's present:

$(".box").toggleClass("active");

// Toggle on click
$(".accordion-header").click(function() {
    $(this).toggleClass("open");
});

hasClass()

Check if an element has a specific class (returns boolean):

if ($(".box").hasClass("active")) {
    console.log("Box is active!");
}

$("li").click(function() {
    if (!$(this).hasClass("disabled")) {
        $(this).toggleClass("selected");
    }
});

Practical Examples

// Navigation active state
$("nav a").click(function(e) {
    e.preventDefault();
    $("nav a").removeClass("active");
    $(this).addClass("active");
});

// Form validation visual feedback
$("input").on("blur", function() {
    if ($(this).val().trim() === "") {
        $(this).addClass("error").removeClass("valid");
    } else {
        $(this).addClass("valid").removeClass("error");
    }
});

// Dark mode toggle
$("#darkToggle").click(function() {
    $("body").toggleClass("dark-mode");
    $(this).text(
        $("body").hasClass("dark-mode") ? "Light Mode" : "Dark Mode"
    );
});