JQuery UI Switch Class

In the last article we saw how to add or remove a class from a specific element. The element contained a class which was overwritten via addClass() function. However, calling removeClass function would restore the actual class. There is a more neat way to do this using JQuery UI switch class functions. The switchClass() function allow developers to replace one css class with another.

To use switchClass() function, simply call it on any element of which you want to change the class. The first parameter to switchClass() function is the old class name, the second parameter is the new class name and the final parameter is the animation speed. Let’s have a look at the following example.

Example of JQuery UI Switch Class

Following webpage contains 2 circular divs. One is a larger circle of light blue color and the other is a smaller circle of orange color. The page also contains a buttons: When the button is clicked, the larger blue circle becomes smaller and its color changes to orange. At the same time, small circle becomes larger and its color becomes light blue. In short both the circles swap each other’s characteristics. Take a look at the following code, explanation is given after that.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Remove Class Affect</title>
          <link href="https://code.jquery.com/ui/1.12.0/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 

      <script>
           
         $(document).ready(function() {

            $("#btn").click(function(){
               $(".circle").addClass("circle2", "slow");
            });
             
              $("#btn2").click(function(){
               $(".circle").removeClass("circle2", "slow");
            });

         });
      </script>
       
       <style>
           .circle{
               width: 200px;
               height: 200px;
               background-color: aqua;
               border-radius: 100%;
               margin: 0 auto;
           }
           
           .circle2{
               width: 100px;
               height: 100px;
               background-color:coral;
               border-radius: 100%;
               margin: 0 auto; 
           }
           
       </style>
       
   </head>
   <body>

 <button id = "btn"> Shrink Circle </button>
       
<button id = "btn2"> Expand Circle </button>

      <div class = "circle">
        
      </div>

   </body>
</html>

Download Code Run Code

The page contains two divs one with the class circle and the other with circle2. The div with circle class has a width and height of 200 px with light blue color. Similarly, the div with class circle has width and height of 100 px with background color of orange. When the button is clicked, JQuery script runs. Inside which, the class of the div with class “circle” is switched to “circle2”. At the same time, the class of div with “circle2” is switched to “circle” via switchClass() function. Hence, larger circle changes to smaller circle and smaller circle changes to larger circle. Now, if you click the button again, the classes of the two divs again switch and circles change their appearance to how they looked when the page was loaded.

<<< JQuery UI Add ClassJQuery UI Toggle Class >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .