Introduction:

In this article we will explain how to show a html elements using jquery or What is show() method in jquery or why use show() method in jquery with example.

Description:

The jQuery show () method is used to show the selected elements. It simply remove the inline style display:none for the selected elements.

Let’s see simple Example:

jQuery  show() Method

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
    <title>Example of jQuery </title>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
 
        $(document).ready(function () {
            $("#btnshow").click(function () {
                $("p").show();
 
            });
 
        });
 
    </script>
</head>
<body>
 
    <div>
 
        <input id="btnshow" type="button" value="Show" />
    </div>
 
    <p style="width: 400px;text-align: justify; display:none;" >
 
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry.
 
        Lorem Ipsum has been the industry's standard dummy text ever since the
        1500s,
 
        when an unknown printer took a galley of type and scrambled it to make a
        type
 
    </p>
</body>
</html>

 

OutPut:




You can also specify the duration as speed  parameter for making the jQuery  show effect animated over a specified period of time. Durations can be specified either using one of the predefined string 'slow' or 'fast', or in a number of milliseconds, for greater precision; higher values indicate slower animations.

 

Let’s see simple Example:

jQuery  show() Method (with speed  parameter)

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
    <title>Example of jQuery </title>
 
    <script src="Scripts/jquery-1.8.2.min.js"></script>
 
    <script type="text/javascript">
 
        $(document).ready(function () {
            $("#fastshow").click(function () {
                $("p.fast").show("fast");
            });
            $("#slowshow").click(function () {
                $("p.slow").show("slow");
            });
        });
 
    </script>
</head>
<body>
    <div>
        <input id="fastshow" type="button" value="Fast show" />
 
        <input id="slowshow" type="button" value="Slow show" />
    </div>
 
    <b>Slow paragraph</b>
 
    <p class="slow" style="width: 400px; text-align: justify;
     border: 1px solid #000; display: none;">
 
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry.
 
    </p>
 
    <b>Fast paragraph</b>
 
 <p class="fast" style="width: 400px;text-align: justify;
border:1px solid #000; display:none;">
 
        Lorem Ipsum has been the industry's standard dummy text ever since the
        1500s, when an unknown printer took a galley of type and scrambled it to make a
        type
 
    </p>
</body>
</html>


OutPut:






You can also specify a callback function to be executed after the show() method completes.

 

Let’s see simple Example:

jQuery  show() Method (with callback function)

 

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
    <title>Example of jQuery </title>
 
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnshow").click(function () {
                $("p").show("slow", function () {
                    // Code to be executed
                    alert("The show effect is completed.");
                });
            });
        });
 
    </script>
</head>
<body>
 
    <div>
 
        <input id="btnshow" type="button" value="Show" />
 
    </div>
 
 
    <b>Call back paragraph</b>
 
    <p style="width: 400px;text-align: justify; display:none;">
 
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry.
 
    </p>
 
</body>
</html>

 

OutPut:




I hope this article will help to you.

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

you may also like