jQuery Effect show() Method

Quiz

The show() method in jQuery is used to display hidden elements by animating them to become visible. It is used to display elements that have been hidden using jQuery's hide() method or CSS properties.

If an element is already visible, the show() method has no effect on it. The animation can be customized using options such as duration, easing, and callback functions.

To hide elements on the DOM, we need to use the hide() method.

Syntax

Following is the syntax of show() method in jQuery −

$(selector).hide(speed,easing,callback)

Parameters

This method accepts the following optional parameters −

speed (optional): A string or number determining how long the animation will run. Default value is 400 milliseconds. Possible values are: milliseconds, slow, fast.
easing (optional): A string indicating which easing function to use for the transition. Default value is "swing". Possible values are: swing, linear.
callback (optional): A function to call once the animation is complete.

Example 1

In the following example, we are using the jQuery's show() method to display the hidden element <div> −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $("#showBtn").click(function(){
        $("#hiddenElement").show();
    });
});
</script>
</head>
<body>
<button id="showBtn">Show Element</button>
<div id="hiddenElement" style="display:none;">
    <h3>This is a hidden element. It will be shown when the button is clicked.</h3>
</div>
</body>
</html>

When we click on the button, the show() method displays the hidden element <div>.

Example 2

The following example displays the two hidden elements when the page is loaded −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $(".hidden").show();
});
</script>
</head>
<body>
<div class="hidden" style="display:none;">
    <h3>Hidden element 1</h3>
</div>
<div class="hidden" style="display:none;">
    <h3>Hidden element 2</h3>
</div>
</body>
</html>

After executing the above program, it shows the hidden elements <div> with id = hidden on to the DOM.

Example 3

The following example shows the hidden elements with animation −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $("#showBtn").click(function(){
        $("#hiddenElement").show("slow");
    });
});
</script>
</head>
<body>
<button id="showBtn">Show Element with Animation</button>
<div id="hiddenElement" style="display:none;">
    <h3>This is a hidden element. It will be shown with animation when the button is clicked.</h3>
</div>
</body>
</html>

After clicking the 'Show Element with Animation' button, it triggers a smooth animation that displays the hidden elements.

jquery_ref_effects.htm

Print Page