Open In App

Which jQuery method is used for adding/removing one or more classes from selected elements ?

Improve
Improve
Like Article
Like
Save
Share
Report

The method used for adding or removing the class to an element is the toggleClass() method. It switches between the addClass() method and the removeClass() method when the event is fired by the event handler. In this article, we will see how the toggleClass() method works and how can we toggle when there are multiple classes using jQuery.

The addClass() method adds a class to the selector and removeClass() removes the CSS class for the selector. The toggleClass() method switches between these as the event fire each time the class gets added and removed as the event fires. We will discuss all these classes step-by-step & understand their implementation through the examples.  

addClass() method: This method adds a class to the selector element in jQuery.

Syntax:

$('selector').addClass('class_name');

Example: In this step, we will add the code for the addClass() method & also add a CSS code for the class named n_class.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,
                   initial-scale=1.0" />
    <title>
          Which jQuery method is used for adding/removing
          one or more classes from selected elements ?
      </title>
 
    <!-- Including jQuery  -->
    <script src=
        letegrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
            crossorigin="anonymous">
        </script>
 
    <style>
        button {
            color: white;
            background-color: #006600;
            width: auto;
            height: 30px;
            margin-top: 5px;
        }
 
        body {
            text-align: center;
        }
 
        p {
            font-size: 60px;
        }
 
        div {
            margin: 5px;
            color: #006600;
            height: auto;
            width: auto;
            position: relative;
            text-align: center;
            display: flex;
            justify-content: center;
        }
 
        .n_class {
            color: black;
            background-color: #006600;
            font-weight: bold;
        }
    </style>
</head>
 
<body>
    <button id="addClass">ADD_CLASS</button>
    <div id="GFG">
        <p>Geeks For Geeks</p>
    </div>
 
    <script>
        $(document).ready(function () {
            $("#addClass").click(function () {
                $("div").addClass("n_class");
            });
        });
    </script>
</body>
</html>


Output:

removeClass() method: This method removes a class in the selector element in jQuery.

Syntax:

$('selector').removeClass('class_name');

Example: In this step, we will add the code for the removeClass() method that will help to remove CSS properties for a class named n_class that we have applied in example1.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,
                   initial-scale=1.0" />
    <title>
          Which jQuery method is used for adding/removing
          one or more classes from selected elements ?
      </title>
 
    <!-- Including jQuery  -->
    <script src=
        letegrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
        crossorigin="anonymous">
        </script>
 
    <style>
        button {
            color: white;
            background-color: #006600;
            width: auto;
            height: 30px;
            margin-top: 5px;
        }
 
        body {
            text-align: center;
        }
 
        p {
            font-size: 60px;
        }
 
        div {
            margin: 5px;
            color: #006600;
            height: auto;
            width: auto;
            position: relative;
            text-align: center;
            display: flex;
            justify-content: center;
        }
 
        .n_class {
            color: black;
            background-color: #006600;
            font-weight: bold;
        }
    </style>
</head>
 
<body>
    <button id="addClass">REMOVE_CLASS</button>
 
    <div id="GFG" class="n_class">
        <p>Geeks For Geeks</p>
    </div>
 
    <script>
        $(document).ready(function () {
            $("#addClass").click(function () {
                $("div").removeClass("n_class");
            });
        });
    </script>
</body>
</html>


Output:

toggleClass() method: Toggles between addClass() and removeClass() methods.

Syntax: 

  • For a single class.
$('selector').toggleClass('class_name');
  • For multiple class.
$('selector').toggleClass('class_name1 class_name2');

For Single class: For instance, the toggling between adding or removing the single class n_class by clicking the button and the click event is fired.

.n_class {
  color: black;
  background-color: #006600;
  font-weight: bold;
}

Example 3:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,
                   initial-scale=1.0" />
    <title>
          Which jQuery method is used for adding/removing
          one or more classes from selected elements ?
      </title>
 
    <!-- Including jQuery  -->
    <script src=
        letegrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
        crossorigin="anonymous">
        </script>
 
    <style>
        button {
            color: white;
            background-color: #006600;
            width: auto;
            height: 30px;
            margin-top: 5px;
        }
 
        body {
            text-align: center;
        }
 
        p {
            font-size: 60px;
        }
 
        div {
            margin: 5px;
            color: #006600;
            height: auto;
            width: auto;
            position: relative;
            text-align: center;
            display: flex;
            justify-content: center;
        }
 
        .n_class {
            color: black;
            background-color: #006600;
            font-weight: bold;
        }
    </style>
</head>
 
<body>
    <button id="toggleClass">TOGGLE_CLASS</button>
 
    <div id="GFG">
        <p>Geeks For Geeks</p>
    </div>
 
    <script>
        $(document).ready(function () {
            $("#toggleClass").click(function () {
                $("div").toggleClass("n_class");
            });
        });
    </script>
</body>
</html>


Output:

For Multiple classes: For instance, we toggle between multiple classes, here, the classes n_class, p_class gets added or removed as the button is clicked & the click event is fired.

1st class:

.n_class {
  color: black;
  background-color: #006600;
  font-weight: bold;
}

2nd class:

.p_class {
  font-family: "Courier New", Courier, monospace;
  border: 5px solid black;
}

Example 4:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,
                   initial-scale=1.0" />
    <title>
          Which jQuery method is used for adding/removing
          one or more classes from selected elements ?
      </title>
 
    <!-- Including jQuery  -->
    <script src=
        letegrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
        crossorigin="anonymous">
        </script>
 
    <style>
        button {
            color: white;
            background-color: #006600;
            width: auto;
            height: 30px;
            margin-top: 5px;
        }
 
        body {
            text-align: center;
        }
 
        p {
            font-size: 60px;
        }
 
        div {
            margin: 5px;
            color: #006600;
            height: auto;
            width: auto;
            position: relative;
            text-align: center;
            display: flex;
            justify-content: center;
        }
 
        .n_class {
            color: black;
            background-color: #006600;
            font-weight: bold;
        }
 
        .p_class {
            font-family: "Courier New", Courier, monospace;
            border: 5px solid black;
        }
    </style>
</head>
 
<body>
    <button id="toggleClass">TOGGLE_CLASS</button>
 
    <div id="GFG">
        <p>Geeks For Geeks</p>
    </div>
 
    <script>
        $(document).ready(function () {
            $("#toggleClass").click(function () {
                $("div").toggleClass("n_class p_class");
            });
        });
    </script>
</body>
</html>


Output:



Last Updated : 02 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads