JQuery UI Toggle Class

In the previous articles we saw how we can add or remove classes to an element. We also studied how we can switch classes for a particular element via JQuery UI. If you remember the last article we used switch class to create a toggle effect on the size and shape of circles. However, there is a better way of achieving this toggle effect via JQuery UI Toggle class function. The toggleClass() adds a class to an element if it is not already added to the element. If the element already contains the class, the toggleClass() function removes that class, thus creating a toggle effect.

To implement toggleClass() function on element, simply call the function on the element on which you want to toggle class. The first paremeter to the toggleClass() function is the name of the class to toggle. The second parameter is the speed with which toggle animation should occur.

Example of JQuery UI Toggle Class

Following webpage contains a circular div of light blue color. The page also contains one button. When the button is pressed, the circle shrinks and its color becomes orange. When the button is clicked again, the size of the circle increases and its color again changes to light blue. Clicking the button again and again toggles the size and shape of the circle. Take a look at the following code, explanation is given after that.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Toggle Class Effect</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").toggleClass("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"> Toggle Circle Classes </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 event of the button is handled by JQuery event handlers. The default class of the div is “circle”. Clicking the buggon 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 button the circle2 class is added to the div. Similarly clicking the button again toggles i.e. 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 Switch Class
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .