How to Toggle Between Two Classes in jQuery ?

Last Updated : 15 May, 2023

In this article, we will see how to toggle between two classes in jQuery. To make the classes toggle, we will use toggleClass() method. The toggleClass() method is used to toggle or switch the class with the selected class element.

Syntax:

$(selector).toggleClass(class1 class2)

Example 1: In this example, we will create a button with a class and then use togggleClass() method to toggle (add/remove) another class to change the button styles on the button toggle.

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"> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
      
    <title> 
        How to toggle between two classes in jQuery? 
    </title> 
  
    <style> 
        body { 
            text-align: center; 
        } 
  
        button { 
            padding: 10px 20px; 
            font-size: 18px; 
            font-weight: bold; 
            border: none; 
            border-radius: 5px; 
            color: white; 
        } 
          
        .Geeks1 { 
            background-color: blue; 
        } 
  
        .Geeks2 { 
            background-color: red; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> 
        How to toggle between two classes in jQuery? 
    </h3> 
  
    <button id="GFG" 
            class="Geeks1"> 
          Click Here! 
      </button> 
  
    <script> 
        $(document).ready(function () { 
            $("#GFG").click(function () { 
                $(this).toggleClass("Geeks1 Geeks2"); 
            }); 
        }); 
    </script> 
</body> 
  
</html>

Output:

Example 2: In this example, we will create a div element with a class and then use togggleClass() method to toggle (change) the div element styles on the button toggle.

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"> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
  
    <title> 
        How to toggle between two classes in jQuery? 
    </title> 
  
    <style> 
        body { 
            text-align: center; 
        } 
  
        .box1 { 
            border: 1px solid black; 
            padding: 50px; 
            width: 200px; 
            margin: auto; 
        } 
  
        .box2 { 
            border: 1px solid black; 
            padding: 50px; 
            width: 200px; 
            margin: auto; 
            background-color: green; 
        } 
  
        button { 
            margin-top: 20px; 
            padding: 10px 20px; 
            font-size: 18px; 
            font-weight: bold; 
            border: none; 
            border-radius: 5px; 
            color: white; 
            background-color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> 
        How to toggle between two classes in jQuery? 
    </h3> 
  
    <div class="box1"> 
        Welcome to GeeksforGeeks 
    </div> 
  
    <button id="GFG"> 
        Click Here! 
    </button> 
  
    <script> 
        $(document).ready(function () { 
            $("#GFG").click(function () { 
                $("div").toggleClass("box1 box2"); 
            }); 
        }); 
    </script> 
</body> 
  
</html>