Interactions
Draggable
Droppable
Resizable
Selectable
Sortable
Widgets
Accordion
Autocomplete
Button
Datepicker
Dialog
Progressbar
Slider
Tabs
Effects
Add Class
Remove Class
Switch Class
Toggle Class
Show
Hide
Toggle
Animate
Effect
Utilities
Position
About jQuery UI
Getting Started
Upgrade Guide
Changelog
Roadmap
Subversion Access
UI Developer Guidelines
Theming
Theming jQuery UI
jQuery UI CSS Framework
ThemeRoller application
Theme Switcher Widget

Functional demo:

toggle

Toggle

Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.

Run Effect

Click the button above to preview the effect.


Warning: fopen(/srv/jqueryui.com/htdocs/libraries/cache/5ceba3b44be978a77ad8e3a1ec4805f0) [function.fopen]: failed to open stream: No such file or directory in /srv/jqueryui.com/htdocs/libraries/fetch_documentation_page.php on line 29

Warning: fwrite(): supplied argument is not a valid stream resource in /srv/jqueryui.com/htdocs/libraries/fetch_documentation_page.php on line 30

Warning: fclose(): supplied argument is not a valid stream resource in /srv/jqueryui.com/htdocs/libraries/fetch_documentation_page.php on line 31

Overview

toggle( effect, [options], [speed], [callback] )

The enhanced toggle method optionally accepts jQuery UI advanced effects.

Uses a specific effect on an element to toggle the element if the first argument is an effect string.

Dependencies

  • Effects Core

Example

Apply the effect slide if you click on the p to toggle a div.

$("p").click(function () {
      $("div").toggle("slide", {}, 1000);
    });


<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/jquery.ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.4.2.js"></script>
  <script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
<script src="http://ui.jquery.com/latest/ui/effects.slide.js"></script>
<style type="text/css">
  div { display: none; margin: 0px; width: 100px; height: 80px; background: blue; position: relative; }
</style>
  <script type="text/javascript">
  $(document).ready(function(){
    $("p").click(function () {
      $("div").toggle("slide", {}, 1000);
    });
  });
  </script>
</head>
<body style="font-size:62.5%;">
  
<p>Click me</p><div></div>

</body>
</html>

Arguments

  • effect

    Type:
    String

    The effect to be used. Possible values: 'blind', 'clip', 'drop', 'explode', 'fold', 'puff', 'slide', 'scale', 'size', 'pulsate'.

  • options

    Type:
    Hash
    Optional

    A object/hash including specific options for the effect.

  • speed

    Type:
    String, Number
    Optional

    Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively.

  • callback

    Type:
    Function
    Optional

    A function that is called after the effect is completed.