Cheap VPS & Xen Server

Residential Proxy Network - Hourly & Monthly Packages

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.          Kreationnext 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>

Comments

comments