jQuery UI Example - `Toggle`

Use custom effects to show or hide matched elements.

For more details about the .toggle() method, please refer to the API documentation .toggle().

.toggle() Demo

Click the button to preview the effect.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Effects - .toggle() Demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <style>
  .toggler {
    width: 500px;
    height: 200px;
  }
  #button {
    padding: .5em 1em;
    text-decoration: none;
  }
  #effect {
    position: relative;
    width: 240px;
    height: 135px;
    padding: 0.4em;
  }
  #effect h3 {
    margin: 0;
    padding: 0.4em;
    text-align: center;
  }
  </style>
  <script>
  $(function() {
    // Run the currently selected effect
    function runEffect() {
      // Get effect type from the select menu
      var selectedEffect = $( "#effectTypes" ).val();

      // Most effect types need no options
      var options = {};
      // Some effects have required parameters
      if ( selectedEffect === "scale" ) {
        options = { percent: 0 };
      } else if ( selectedEffect === "size" ) {
        options = { to: { width: 200, height: 60 } };
      }

      // Run the effect
      $( "#effect" ).toggle( selectedEffect, options, 500 );
    };

    // Set effect from the select menu value
    $( "#button" ).click(function() {
      runEffect();
      return false;
    });
  });
  </script>
</head>
<body>

<div class="toggler">
  <div id="effect" class="ui-widget-content ui-corner-all">
    <h3 class="ui-widget-header ui-corner-all">Toggle</h3>
    <p>
      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
    </p>
  </div>
</div>

<select name="effects" id="effectTypes">
  <option value="blind">Blind Effect</option>
  <option value="bounce">Bounce Effect</option>
  <option value="clip">Clip Effect</option>
  <option value="drop">Drop Effect</option>

<option value="explode">Explode Effect</option> <option value="fold">Fold Effect</option> <option value="highlight">Highlight Effect</option> <option value="puff">Puff Effect</option> <option value="pulsate">Pulsate Effect</option> <option value="scale">Scale Effect</option> <option value="shake">Shake Effect</option> <option value="size">Size Effect</option> <option value="slide">Slide Effect</option> </select>

<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>

</body> </html>

View Demo

❮ Api Jquery Widget Home ❯

jQuery UI Example - Toggle

.toggle() Demo

jQuery UI Example - `Toggle`