jQuery UI | toggleClass Method

The jQuery UI framework classes and methods have definitely improved jQuery toggle() and toggleClass() methods making it more interactive for users and developers. jQuery UI provides in-built toggleClass() method which manages visual toggling effects by adding or removing CSS classes to matched or selected elements. It helps in changing from one CSS transition state to another maintaining all the style changes in jQuery code.

Syntax:

$(selector).toggleClass(className [, switch ] [,
          duration ] [, easing ] [, complete ] )

or

$(selector).toggleClass(className [, switch ] [, options])

or

$(selector).toggleClass([state] )

Parameters: It accepts a parameter “className” which is the name of the class that are going to be added, toggled or removed for the selected elements. The type for “className” is string. More than one class are separated by space.
Options:



  • switch: The type is Boolean . It helps the toggleClass() method to switch between add class or remove class depending on “true” or “false” values.
  • duration: This option allows you to choose the time duration for the visual toggling effect in milliseconds. The types are number or string. The default value is 400 and possible values are “fast”, “slow”, “normal”.
  • easing: The type is string. This option mentions, what kind of easing or progress is required for the toggling effect. Default value is “swing” for basic smooth transitions.
  • complete: This is the callback method called when the toggling effect is completed for the selected elements. The callback functions can be used for handling user validations.

Return Value: It returns the selected elements with toggling new class.

Example 1: The following example demonstrates the toggleClass() method in the script section. It shows toggling effect by adding and removing “newToggleClass” class to container element by button click event.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
  
    <title>jQuery UI toggleClass</title>
    <link href=
          rel="stylesheet">
    <script src=
            "https://code.jquery.com/jquery-1.10.2.js">
  </script>
    <script src=
  </script>
  
    <style>
        .divID {
            width: 360px;
            height: 140px;
            position: relative;
            background: green;
            border: 1px solid black;
        }
          
        .height {
            height: 10px;
        }
          
        #btnId {
            padding: .6em 1em;
            text-decoration: none;
        }
          
        #container {
            position: relative;
            width: 250px;
            padding: 1em;
            letter-spacing: 0;
            font-size: 1.0em;
            color: white;
        }
          
        .newToggleClass {
            text-indent: 30px;
            letter-spacing: .5em;
            width: 360px;
            height: 90px;
            padding: 10px;
            margin: 10px;
            font-size: 1.0em;
        }
    </style>
  
    <script type="text/javascript">
        $(function() {
            $("#btnId").on("click", function() {
                $("#container").toggleClass("newToggleClass", 3000);
            });
        });
    </script>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <b class="highlight">jQuery UI toggleClass method </b>
    <div class="height"> </div>
    <br>
    <div class="divID ui-corner-all">
        <div id="container" class="newToggleClass">
            In this section we are learning jQuery UI 
          framework's toggleClass() method. It toggles 
          between adding or removing classes for selected elements.
        </div>
    </div>
    <div class="height"> </div>
    <br>
    <button id="btnId" 
            class="ui-state-default ui-corner-all">
      Toggle Effect
  </button>
</body>
  
</html>

chevron_right


Output:

Example 2: The following example demonstrates the toggleClass() method by adding and removing multiple classes namely “font-styles”, “padding” and “border” to paraId element by button click event.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
  
    <title>jQuery UI toggleClass</title>
    <link href=
          rel="stylesheet">
    <script src=
            "https://code.jquery.com/jquery-1.10.2.js">
  </script>
    <script src=
  </script>
    <style>
        .font-styles {
            background: red;
            font-size: 2em;
            width: 350px;
        }
          
        .padding {
            padding: 1em;
        }
          
        .border {
            border: 1px solid black;
            border-radius: 25px;
        }
          
        #paraId {
            width: 350px;
            height: 150px;
        }
    </style>
  
    <script type="text/javascript">
        $(document).ready(function() {
            $('.btnClass').click(function() {
                $("#paraId").toggleClass(
                  "font-styles padding border", 2500);
            });
        });
    </script>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <b class="highlight">jQuery UI toggleClass method </b>
    <div class="height"> </div>
    <br>
    <p id="paraId">Toggling GFG website </p>
    <button class="btnClass">Click this</button>
</body>
  
</html>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.