jQuery Effects - Show

jQuery Effects - Show: Learn about the jQuery show() method, how it works, and its example.
Submitted by Pratishtha Saxena, on September 22, 2022

jQuery show() Method

Showing content on a webpage is sometimes necessary to perform dynamically. Here, we have to work on clicks for it. For example – some content has to be shown as soon as the user clicks some button or presses any key. Therefore, for this, we'll use the show() method of jQuery.

This is the basic jQuery effect method that helps to show the specified content on the webpage. The HTML elements can be mentioned as a selector and this method will help to show that element on the page.

show() Method Syntax

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

The show() method takes in optional parameters namely – speed and callback. The speed indicates the speed of the display of the content in milliseconds. Whereas the callback is a function that gets initiated when the show() method completes its task.

For this method to get executed, make sure the initial element or the content is in hidden mode. After that only we can show the content using this.

Let's move on to the below example which will help to understand the show() method easily. The content in the "h3 tag is hidden initially, which gets displayed after the button is clicked by the user.

jQuery show() Method Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery Effects - Show</h2>
    <p>Click the button to show some content on the page.</p>
    <button>Show</button>
    <hr>
    <h3>SHOW THIS CONTENT !!!</h3>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function() {
        $('h3').hide();
        $('button').click(function() {
            $('h3').show(1000);
        })
    });
  </script>
</html>

Output:

jQuery - Effects: Hide

jQuery - Effects: Toggle

Comments and Discussions!

Load comments ↻