Learning jQuery

jQuery’s .show() and .hide() methods can be used to show or hide any HTML elements on a page. Usually, the methods are used as the results of a trigger event (for example, if an item is either hidden or shown based on a click event) or used with a timer function so that something hides or shows based on how long a page has been loaded for. Whatever context you choose to use .show() or .hide() methods, they’re pretty handy and easy to understand.

For an example of how you would use the methods as a result of a click event, see the code below:

$(".button").click(function(){
    $("h1").show();
})

The example above demonstrates how you would use a click event to trigger an element appearing on a page. After the .button class is clicked, any h1 on the page that is hidden would be shown. Using the .hide() method instead would require the exact same syntax.

The .show() and .hide() methods also take a speed parameter that allows you to define the speed at which you’d like to have the selected elements appear or disappear. You can define the speed as a number (in milliseconds) or string (slow, fast). See an example of how to use the speed parameter below:

$(".button").click(function(){
  $("h1").hide(400);
})

There are also a few other parameters that the .show and .hide methods will accept, including easing effects. As with most jQuery methods, you can also place a callback function within the method’s parentheses to be executed after the show/hide event.