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 jQuery show() method with Example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Example of jQuery show method </title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnshow").click(function () {
                $("p").show();
            });
        });
    </script>
</head>
<body>
    <input id="btnshow" type="button" value="Show" />
    <p class="paragraph" style="display:none">
        Hello SQL Tutorials Point
    </p>
    <style>
        .paragraph {
            width: 400px;
            text-align: justify;
            height: 100px;
            background-color: #dad420;
            text-align: center;
            padding-top: 36px;
            font-size: 18px;
            color: #000;
            margin-top:10px;
        }
    </style>
</body>
</html>

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 Example of  jQuery  show() Method (with speed  parameter)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Example of jQuery show method </title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnfastshow").click(function () {
                $("p.fast").show("fast");
            });
            $("#btnslowshow").click(function () {
                $("p.slow").show("slow");
            });
        });
 
    </script>
</head>
<body>
    <table>
        <tr>
            <td><input id="btnslowshow" type="button" value="Show Slow" /></td>
            <td><input id="btnfastshow" type="button" value="Show Fast" /></td>
        </tr>
        <tr>
            <td>
                <p class="slow" style="display:none;">
                    <b>Slow paragraph</b>
                </p>
            </td>
            <td>
                <p class="fast" style="display:none;">
                    <b>fast Method</b>
                </p>
            </td>
        </tr>
    </table>
    <style>
        .fast {
            width: 200px;
            text-align: justify;
            border: 1px solid #000;
            margin-right: 15px;
            height: 200px;
            background-color: #dad420;
        }
 
        .slow {
            width: 200px;
            text-align: center;
            border: 1px solid #000;
            float: left;
            background-color: #dad420;
            margin-right: 15px;
            height: 200px;
        }
    </style>
</body>
</html>

 

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

Let’s see Example of jQuery show () Method (with callback function)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Example of jQuery show Method </title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
 
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnshow").click(function () {
                $("p").show(".paragraph", function () {
                    alert("The show effect is completed.");
                });
            });
        });
    </script>
</head>
<body>
    <input id="btnshow" type="button" value="Show" />
    <p class="paragraph" style="display:none;">
        <b>Call back paragraph</b>
    </p>
    <style>
        .paragraph {
            width: 200px;
            text-align: center;
            border: 1px solid #000;
            background-color: #dad420;
            margin-right: 15px;
            height: 200px;
            margin-top: 10px;
        }
    </style>
 
</body>
</html>

 

 

Thanks for reading this article.

 

 Let's check live example

comments


Leave a comment

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

You may also like