jQ UI Toggle

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

jQuery UI toggle

The jQuery toggle() method is used to toggle the show() or hide() method depending on whether the element is hidden or not.

Syntax:

 
  1. .hide( effect [, options ] [, duration ] [, complete ] )   

Parameters of toggle method:

  • Effect:This parameter specifies the effects which are used for transition.
  • Options: This is used for specifying the specific setting and easing for the effects. Each effect has its own set of options.
  • Duration:This specifies the time duration and indicates the number of milliseconds of the effect. Its default value is 400.
  • Complete:It is a callback method. It is called for each element when the effect is completed for the elements.

jQueryUI toggle example

Let's take an example of jQueryUI toggle() method with explode effect:

 
  1. <!doctype html>  
  2. <html lang="en">  
  3.    <head>  
  4.       <meta charset="utf-8">  
  5.       <title>jQuery UI Toggle Example</title>  
  6.       <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
  7.       <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  8.       <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  9.       <!-- CSS -->  
  10.       <style>  
  11.          .toggler { width: 500px; height: 200px; }  
  12.          #button { padding: .5em 1em; text-decoration: none; }  
  13.          #effect { width: 240px; height: 155px; padding: 0.4em; position: relative; }  
  14.          #effect h3 { margin: 0; padding: 0.4em; text-align: center; }  
  15.       </style>  
  16.       <script>  
  17.          $(function() {  
  18.             function runEffect() {  
  19.                $( "#effect" ).toggle('explode', 300);  
  20.             };  
  21.             $( "#button" ).click(function() {  
  22.                runEffect();  
  23.                return false;  
  24.             });  
  25.          });  
  26.       </script>  
  27.    </head>  
  28.    <body>  
  29.       <div class="toggler">  
  30.       <div id="effect" class="ui-widget-content ui-corner-all">  
  31.          <h3 class="ui-widget-header ui-corner-all">Toggle</h3>  
  32.          <p>  
  33.          JavaTpoint provides easy and point to point learning of various tutorials such as   
  34.         Java Tutorial, Core Java Tutorial, Android, Design Pattern, JavaScript, AJAX, SQL, Python etc.  
  35.          </p>  
  36.       </div>  
  37.       </div>  
  38.       <a href="#" id="button" class="ui-state-default ui-corner-all">Togglemethod with explode effect</a>  
  39.    </body>  
  40. </html>