jQuery Effect toggle() Method
The toggle() method in jQuery is used to toggle between hiding and showing elements with a sliding motion, creating a toggle effect.
When we use this method on a selected set of elements, toggle() toggles the visibility of those elements. If the elements are currently visible, toggle() hides them with a sliding motion. If the elements are currently hidden, toggle() shows them with a sliding motion. This creates a smooth transition effect, making the display toggle appear more visually appealing.
Syntax
Following is the syntax of toggle() method in jQuery −
$(selector).toggle(speed,easing,callback)
Parameters
This method accepts the following optional parameters −
speed (optional): A string or number determining how long the animation will run. Default value is 400 milliseconds. Possible values are: milliseconds, slow, fast.
easing (optional): A string indicating which easing function to use for the transition. Default value is "swing". Possible values are: swing, linear.
callback (optional): A function to be executed once the animation is complete.
Example 1
This program creates a button that toggles the visibility of a <div> element when clicked −
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#toggleButton').click(function() {
$('#toggleDiv').toggle();
});
});
</script>
</head>
<body>
<button id="toggleButton">Toggle</button>
<div id="toggleDiv" style="background-color: #40a944; width: 200px; height: 200px;"></div>
</body>
</html>
Click on the button on to see the toggle effect applied on the <div> element.
Example 2
In this example, we are using the jQuery's toggle() method with a specified "speed" parameter −
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#toggleButton').click(function() {
$('#toggleDiv').toggle(2000);
});
});
</script>
</head>
<body>
<button id="toggleButton">Toggle</button>
<div id="toggleDiv" style="background-color: #40a944; width: 200px; height: 200px;"></div>
</body>
</html>
When we click on the button, the toggle effect will performed on the <div> element over the speed of 2 seconds.
Example 3
The following example uses the jQuery's toggle() method with a callback function −
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#toggleButton').click(function() {
$('#toggleDiv').toggle('slow', function() {
if ($(this).is(':visible')) {
$('#toggleMessage').text('Div is now visible');
} else {
$('#toggleMessage').text('Div is now hidden');
}
});
});
});
</script>
</head>
<body>
<button id="toggleButton">Toggle</button>
<div id="toggleDiv" style="background-color: #40a944; width: 200px; height: 200px;"></div>
<p id="toggleMessage"></p>
</body>
</html>
After clicking the button, when the div element is hidden, it shows "Div is now hidden". When the div element is visible, it shows "Div is now visible".