jQuery Hide/Show Methods

jQuery provides simple and effective methods to hide and show elements on a web page. These methods are useful for creating dynamic and interactive user interfaces without reloading the page.

Methods Overview

  1. .hide()
  2. .show()
  3. .toggle()
  4. .fadeOut()
  5. .fadeIn()
  6. .fadeToggle()
  7. .slideUp()
  8. .slideDown()
  9. .slideToggle()

1. .hide()

The .hide() method hides the selected elements by setting their display property to none.

$("p").hide(); // Hides all <p> elements

Try It Now

Duration (Optional): You can specify the speed of the hiding animation in milliseconds or use predefined strings ("slow", "fast").

$("p").hide(1000); // Hides all <p> elements over 1 second

Try It Now

2. .show()

The .show() method displays the hidden elements by setting their display property to their default value.

$("p").show(); // Shows all <p> elements

Try It Now

Duration (Optional): Similar to .hide(), you can specify a duration.

$("p").show(500); // Shows all <p> elements over 0.5 seconds

Try It Now

3. .toggle()

The .toggle() method toggles between hiding and showing the selected elements.

$("p").toggle(); // Toggles visibility of all <p> elements

Try It Now

Duration (Optional): You can specify a duration.

$("p").toggle("slow"); // Toggles visibility over a slow animation

Try It Now

4. .fadeOut()

The .fadeOut() method gradually reduces the opacity of the selected elements to 0, making them invisible.

$("p").fadeOut(); // Fades out all <p> elements

Try It Now

Duration (Optional): Specify the speed of the fading animation.

$("p").fadeOut(2000); // Fades out all <p> elements over 2 seconds

Try It Now

5. .fadeIn()

The .fadeIn() method gradually increases the opacity of the selected elements from 0 to 1, making them visible.

$("p").fadeIn(); // Fades in all <p> elements

Try It Now

Duration (Optional): Specify the speed of the fading animation.

$("p").fadeIn(1000); // Fades in all <p> elements over 1 second

Try It Now

6. .fadeToggle()

The .fadeToggle() method toggles the fading in and out of the selected elements.

$("p").fadeToggle(); // Toggles fade effect of all <p> elements

Try It Now

Duration (Optional): Specify the speed of the toggle animation.

$("p").fadeToggle("fast"); // Toggles fade effect quickly

Try It Now

7. .slideUp()

The .slideUp() method hides the selected elements with a sliding motion, decreasing their height.

$("p").slideUp(); // Slides up all <p> elements

Try It Now

Duration (Optional): Specify the speed of the slide-up animation.

$("p").slideUp(800); // Slides up all <p> elements over 0.8 seconds

Try It Now

8. .slideDown()

The .slideDown() method shows the selected elements with a sliding motion, increasing their height.

$("p").slideDown(); // Slides down all <p> elements

Try It Now

Duration (Optional): Specify the speed of the slide-down animation.

$("p").slideDown(1200); // Slides down all <p> elements over 1.2 seconds

Try It Now

9. .slideToggle()

The .slideToggle() method toggles between sliding up and sliding down the selected elements.

$("p").slideToggle(); // Toggles slide effect of all <p> elements

Try It Now

Duration (Optional): Specify the speed of the toggle animation.

$("p").slideToggle("slow"); // Toggles slide effect slowly

Try It Now

Examples

Basic Hide/Show

<button id="hideButton">Hide</button>
<button id="showButton">Show</button>
<p>This is a paragraph.</p>

Try It Now

$("#hideButton").click(function() {
    $("p").hide();
});

$("#showButton").click(function() {
    $("p").show();
});

Try It Now

Toggle with Animation

<button id="toggleButton">Toggle</button>
<p>This is another paragraph.</p>

Try It Now

$("#toggleButton").click(function() {
    $("p").toggle(500); // Toggles visibility over 0.5 seconds
});

Try It Now

Summary

jQuery’s hide/show methods provide a simple way to control the visibility of elements on a webpage, with or without animations. These methods enhance user interaction and improve the dynamic feel of web applications.