Scripting and Applications - Web Standards: Mastering HTML5, CSS3, and XML - page 215

Toggle Show and Hide
You can use the toggle function to toggle hide/show of an element in jQuery. An element can be hidden or shown
using the hide and show functions, respectively (Listing 6-37).
Listing 6-37. Toggle, Show, and Hide Functions in jQuery
// Toggle hide/show of an element
$("#DivID").toggle(1000);
// Perform an action after the animation is completed
$("#DivID").toggle(1000, function () {
alert("Toggle Complete");
});
// Hide an element
$("#DivID").hide(1000);
// Perform an action after the animation is completed
$("#DivID").hide(1000, function () {
alert("Hide Complete");
});
// Show an element
$("#DivID").show(1000);
// Perform an action after the animation is completed
$("#DivID").show(1000, function () {
alert("Show Complete");
});
Slide Functions
In jQuery, the basic slide functions are slideToggle , slideUp , and slideDown (Listing 6-38).
Listing 6-38. Toggle, Show, and Hide Functions in jQuery
// Toggle slide up and down
$("#DivID").slideToggle(1000);
// Perform an action after the animation is completed
$("#DivID").slideToggle(1000, function () {
alert("Slide Toggle Complete");
});
// Slide up
$("#DivID").slideUp(1000);
// Perform an action after the animation is completed
$("#DivID").slideUp(1000, function () {
alert("Slide Up Complete");
});