Show, hide and toggle

Two common, impressive effects often used on Web pages are hiding visible page elements and showing hidden page elements.

Hiding an element

The function that let us do this is, not surprisingly, hide().

$(document).ready(function() {
    $('h1').hide();
 });

Showing an element

The function that let us do this is show().

$(document).ready(function() {
   $('h1').show();
 });

Toggling an element

jQuery also comes with another function called toggle(), which will make matching elements visible if they are hidden or hidden if they are visible.

$(document).ready(function() {
   $('h1').toggle();
 });