jQuery toggle ()
The jQuery toggle() method is a special function that toggles between the
hide() and show() methods, displaying hidden elements and hiding visible
ones.
Syntax
$(selector).toggle(speed, easing, callback);
- selector: Specifies the element(s) to toggle.
- speed (optional): Defines the duration of the toggle animation (e.g., slow, fast, or milliseconds).
- easing (optional): Specifies the easing function to use for the animation (e.g., swing or linear).
- callback (optional): A function to execute after the toggle animation is complete.
<!DOCTYPE html>
<html>
<head>
<title>jQuery toggle() Example with
Easing</title>
<script>
$(document).ready(function(){
$("#toggleButton").click(function(){
$("#text").toggle(1000, "swing",
function(){
alert("Toggle animation
completed.");
});
});
});
</script>
</head>
<body>
<p id="text">This text will toggle visibility with a "swing" easing
effect.</p>
<button id="toggleButton">Toggle Text</button>
</body>
</html>
