How to Show a Hidden Element with jQuery

This guide covers the core jQuery methods used to reveal hidden HTML elements on a webpage. You will learn the primary syntax using the .show() method, explore its optional parameters such as duration and callback functions, and discover alternative display methods like .fadeIn() and .slideDown() for animated transitions.

The Basic .show() Syntax

The most straightforward way to display an element hidden with CSS (display: none) is the .show() method.

$(selector).show();

To show an element with an ID of myElement, use:

$("#myElement").show();

Adding Speed and Callback Parameters

The .show() method accepts two optional arguments: speed and callback.

$(selector).show(speed, easing, callback);

• speed: A string ("slow", "fast") or a number in milliseconds (e.g., 400, 1000) defining the duration of the animation.
• callback: A function executed once the show animation completes.

Example with duration and a callback:

$("#myElement").show(500, function() {
    console.log("The element is now fully visible.");
});

Alternative Methods for Showing Elements

jQuery provides specialized methods depending on the visual effect required:

• .fadeIn(): Gradually increases the opacity of the hidden element until it is fully visible.

  $("#myElement").fadeIn("slow");

• .slideDown(): Reveals the element with a downward sliding motion by animating its height.

  $("#myElement").slideDown(300);

• .toggle(): Switches the visibility state automatically, showing the element if it is hidden, or hiding it if it is visible.

  $("#myElement").toggle();