Home > DeveloperSection > Articles > JQuery show method

JQuery show method


JQuery JQuery 
Ratings:
0 Comment(s)
 6181  View(s)
Rate this:

JQuery show method

In JQuery show () method is very attractive method. By using this method we can show element on page. In this article I am trying to give example which demonstrate how we can implement show () method in page. I have three images on page and I want to give functionality to user that they can hide and show images. If user will click on hide button then all images will hide from page and if user wants to see images then user can click on show button as shown below:

Syntax: $(“element”).show (“fast, medium, slow”)

Code:

<head>

    <title>JQuery Show</title>

 

    <script type="text/javascript" src="jquery.min.js"></script>

 

    <script type="text/javascript">

        $(document).ready(function()        {

            $("button#hide").click(function()            {

                $("img").hide("medium"); // hide function will hide all images from page

            });

            $("button#show").click(function()            {

                $("img").show("fast"); // show function will show all images on page

            });

        });

    </script>

 

</head>

<body>

<h2>Using show method in JQuery</h2>

    <table width="300" border="2" bgcolor="blue">

        <tr>

            <td>

                <table width="400" bgcolor="#cccd44">

                    <thead>

                        <tr>

                            <th>

                                Koala

                            </th>

                            <th>

                                Lighthouse

                            </th>

                            <th>

                                Penguins

                            </th>

                        </tr>

                    </thead>

                    <tr>

                        <td align="center">

                            <img src="Koala.jpg" width="100" height="50" />

                           

                        </td>

                        <td align="center">

                            <img src="Lighthouse.jpg" width="100" height="50" />                        </td>

                        <td align="center">

                            <img src="Penguins.jpg" width="100" height="50" />                        </td>

                    </tr>

                    <tr>

                        <td align="center" colspan="3">

                            <button id="show">

                                Show</button>&nbsp;&nbsp;

                            <button id="hide">

                                Hide</button>

                        </td>

                    </tr>

                </table>

            </td>

        </tr>

    </table>

</body>

Screenshot

JQuery show method

If user clicks on hide button all images will hide from page as shown below:

Screenshot

JQuery show method

If user wants to see images then user can click on show button then all images will visible as shown below:

Screenshot

JQuery show method


Don't want to miss updates? Please click the below button!

Follow MindStick