Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 20 Aug, 2021

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 both 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.  

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

1. 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>Geeks for Geeks</title>
      
    <!-- Including jQuery  -->
    <script
      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:

2. 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>Geeks for Geeks</title>
      
    <!-- Including jQuery  -->
    <script
      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:



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

Syntax: 

  1. For a single class.
$('selector').toggleClass('class_name');

       2. 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>Geeks for Geeks</title>
      
    <!-- Including jQuery  -->
    <script
      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>Geeks for Geeks</title>
      
    <!-- Including jQuery  -->
    <script
      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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!