jQuery UI | toggleClass Method

Last Updated : 27 Apr, 2020

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 ] )

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

$(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.

html

<!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=
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
          rel="stylesheet">
    <script src=
            "https://code.jquery.com/jquery-1.10.2.js">
  </script>
    <script src=
            "https://code.jquery.com/ui/1.10.4/jquery-ui.js">
  </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>

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.

html

<!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=
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
          rel="stylesheet">
    <script src=
            "https://code.jquery.com/jquery-1.10.2.js">
  </script>
    <script src=
            "https://code.jquery.com/ui/1.10.4/jquery-ui.js">
  </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>

Output:

jQuery | slideToggle() Method

geetanjali16

Improve

Article Tags :

jQuery UI | toggleClass Method

Similar Reads

Thank You!

What kind of Experience do you want to share?