jQuery UI | toggle() Method

Last Updated : 22 Apr, 2020

jQuery UI framework provides toggle() method to display the switch between show or hide functionalities depending on the status of the selected elements and the type of toggle effect chosen by the user. Syntax:

(selector).toggle( effectType [, options ] [, duration ] [, complete ] )

Parameters: This method accepts four parameters as mentioned above and described below:

effectType: The type is string. It specifies the type of the effect which is used for the toggle transition.
options: The type is object . It specifies the effects oriented specific setting for easing options.
duration: The types are number or string . This specifies about, how long the toggle effect should run. For example "fast", "slow" or default value 400 ms.
complete: This is the callback method which is called when the toggle effect is completed.

Return Value: It returns the selected elements with the given toggle effect. Links for jQuery UI:

<link href=”https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css”rel=”stylesheet”type=”text/css”/> <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>

Example 1: In the following example, the toggle() functionality is implemented in jQuery code with pulsate effect type which is passed as a parameter displaying the toggle effect for the matched elements. The pulsate effect type adjusts the opacity of the selected element in a switch on or off manner. The ui-widget-content and ui-widget-header are the in-built classes provided by the jQuery UI CSS framework to make the interface more interactive and beautiful.

html

<!DOCTYPE html>
<html>
    
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width,initial-scale=1"> 
    
    <title>jQuery UI toggle method</title>
    
    <!--Pre-compiled libraries of jQuery UI -->
    <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>
        .mainDiv {
            width: 550px; 
            height: 180px;
        }
        
        #toggleBtnId {
            padding: .4em 1em;
            text-decoration: none; 
        }
    
        #container { 
            width: 300px;
            height: 150px; 
            padding: 0.3em;
            position: relative;
        }

        #container h3 { 
            margin: 0; 
            padding: 0.4em;
            text-align: center;
        }     

        .height{
            height: 10px;
        }
    </style>
        
    <script>
        $(function() {
            function toggleEffect() {
                $( "#container" ).toggle('pulsate', 500);
            };
            
            $( "#toggleBtnId" ).click(function() {
                toggleEffect();
                return false;
            });
        });
    </script>
</head>
    
<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    
    <b>jQuery UI toggle method</b>
    
    <div class="height"></div><br/>
    
    <div class = "mainDiv">
        <div id = "container" 
            class = "ui-widget-content">
            
            <h3 class = "ui-widget-header">
                Toggle
            </h3>
            
            <p>
                We are learning jQuery UI framework's
                toggle() method! Please click button
                to show and hide the above div.
            </p>
        </div>
    </div>
    
    <input type = "button" id = "toggleBtnId"
            class = "ui-state-default"
            value = "Click this" />
</body>

</html>

Output:

Example 2: The jQuery UI framework provides toggle() method with many varieties of visual toggle effects as its parameter. In the following example code, we will demonstrate the method with a combobox menu options to select few toggle effect types. When the effect type is selected by the user, it is passed to toggle() method for the output, as shown in the output image. The programmer can write the code and choose effect types as parameters depending on the application's requirement.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
        
    <title>
        jQuery UI toggle Method with All effects
    </title>
    
    <link href = 
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
            rel = "stylesheet">
            
    <script src=
        "http://code.jquery.com/jquery-2.1.3.js">
    </script>
    
    <script src=
        "http://code.jquery.com/ui/1.11.2/jquery-ui.js">
    </script>
    
    <style>
        .height { 
            height: 10px;
        }
        
        .divClass { 
            width: 500px;
            height: 200px;
        }
        
        #btnID { 
            padding: .4em 1em;
            text-decoration: none;
        }
        #container { 
            width: 250px; 
            height: 180px; 
            padding: 0.5em;
            position: relative;
        }
        
        #container h4 { 
            margin: 0; 
            padding: 0.3em;
            text-align: center;
        }
    </style>
    
    <script>
        $( function() {
            
            // Toggle the selected effect
            // type by the user
            function toggleEffect() {
            
            var effectType = $( "#typesOfEffectId" ).val(); 
            
            // Toggle the effect with call back
            $( "#container" ).toggle( effectType, 800);
            };
            
            // Set effect from select menu value
            $( "#btnID" ).on( "click", function() {
                toggleEffect();
            });
        });
    </script>
</head>

<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1> 
    
    <b>
        jQuery UI toggle method
        with all type of effects
    </b>
    
    <div class="height"></div>
    
    <div class="divClass">
        
        <div id="container" class="ui-widget-content">
            <h4 class="ui-widget-header">Toggle</h4>
    
            <p>
                In this tutorial, we are going to
                learn about jQuery UI framework
                toggle method with different variety
                of effects. The type of effect is
                selected from combobox menu to get
                different toggle effects.
            </p>
        </div>
    </div>
    <br/>

    <select name="effectTypes" id="typesOfEffectId">
        <option value="blind">Blind</option>
        <option value="clip">Clip</option>
        <option value="drop">Drop</option>
        <option value="explode">Explode</option>
        <option value="fade">Fade</option>
        <option value="fold">Fold</option>
        <option value="highlight">Highlight</option>
        <option value="puff">Puff</option>
        <option value="shake">Shake</option>
        <option value="bounce">Bounce</option> 
        <option value="slide">Slide</option>
    </select>

    <button id="btnID" class="ui-state-default">
        Toggle Effect
    </button>
</body>

</html>

Output:

jQuery | slideToggle() Method

geetanjali16

Improve

Article Tags :

jQuery UI | toggle() Method

Similar Reads

Thank You!

What kind of Experience do you want to share?