To toggle the show() or hide() method, the jQuery toggle() method is used. The effect depends on whether the element is hidden or not.
Syntax:
.toggle( effect, [options], [duration], [complete] )
Parameters:
- Effect: Used to define the effects which are used for transition.
- Options: Used to define the specific setting and easing for the effects, where each effect has its own set of options.
- Duration: Used to define the time duration and to specify the number of milliseconds of the effect, with a default value of 400.
- Complete: Called for each element, as a callback method, when the effect is completed for the elements.
Example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Toggle Example</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<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>
<!-- CSS -->
<style>
.toglr { width: 300px; height: 150px; }
#btn { padding: .5em 1em; text-decoration: none; }
#effect-1 { width: 200px; height: 100px; padding: 0.4em; position: relative; }
#effect-1 h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script>
$(function() {
function runEffect() {
$( "#effect-1" ).toggle('explode', 300);
};
$( "#btn" ).click(function() {
runEffect();
return false;
});
});
</script>
</head>
<body>
<div class="toglr">
<div id="effect-1" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Hello World!!</h3>
<p>
Click the button to explode me......
</p>
</div>
</div>
<a href="#" id="btn" class="ui-state-default ui-corner-all">Toggle with Explode effect</a>
</body>
</html>
Explanation:
In the above example, we are using the jQueryUI toggle() method with the explode effect. Here, the element hides with an explosion on clicking the button. When the button is clicked again, the element again joins back and comes to the view. This process can be repeated again and again to create a toggle effect.
