JQuery UI Add Class

The last article explained how we can apply fancy effects on elements via JQuery UI. This article focuses on changing the appearance of the element at run time. For instance you have a div which asks the user to click a button. When user clicks the button you want to change the background color of the div to green and change its text to success message. You can do so by changing the class of the element at run time. JQuery UI Add class and remove class functions allow users to perform such actions.

To implement add class and remove class functionality, simply call addClass and removeClass functions on the elements. The first parameter to these functions is the name of the class to add or remove. The second parameter is the time in milliseconds or slow/fast values which specify speed with which class is removed or applied to the element.

Example of JQuery UI Add Class and Remove class

Following webpage contains a circular div of light blue color. The page also contains two buttons: one for shrinking the circle and the other for expanding circle. When use presses shrink button the circle shrinks, similarly clicking expand button expands the circle. 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

If you look at the script section of the code, you will find that click events of both the buttons are handled by JQuery event handlers. The default class of the div is “circle”. Clicking the shrink button adds “circle2” class to the div. Look at the styles defined by the “circle2” class. It decreases the width and height of the div to 100px which is 200px in circle class. The circle2 class also changes the background color of the div. Therefore, when you click the shrink button the circle2 class is added to the div. This shrinks the circle and also changes its background. Similarly clicking expand button removes “circle2” class from the div which restores default “circle” class.. This increases size as well as changes the background color of the div.

<<< JQuery UI EffectJQuery UI Switch Class >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .