jQuery UI | toggle() Method

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.

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 toggle method</title>
      
    <!--Pre-compiled libraries of jQuery UI -->
    <link href
            rel = "stylesheet">
              
    <script src
    </script>
      
    <script src
    </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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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
            rel = "stylesheet">
              
    <script src=
    </script>
      
    <script src=
    </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>

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.