Advertisements

jQuery Effects – Hide and Show

Hide and show are most useful effect of jQuery. In this article I will show you how you can easily hide and show elements using jQuery.

jQuery Hide:

<!DOCTYPE HTML>

<html lang="en-US">

<head>

            <meta charset="UTF-8">

            <title>Hide</title>

            <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

            <script type="text/javascript">
                        $(document).ready(function(){
                            $("#button").click(function(){
                                $("#all").hide();
                              });
                        })
            </script>

</head>
<body>
       <input type="button" name="button" id="button" class="button" value="Click" />
       <div id="all">I love my country</div>
</body>

</html>

 

To hide the element we have to use .hide() and the following code works for hide a element.

 

 $(document).ready(function(){
    $("#button").click(function(){
      $("#all").hide();
    });
 })

 Click here for Demo

Advertisements

jQuery Show:

To show a element use the following code:

<!DOCTYPE HTML>

<html lang="en-US">

<head>

            <meta charset="UTF-8">

            <title>Show</title>

            <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

            <script type="text/javascript">

                        $(document).ready(function(){

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

                                                $("#all").show();

                                    });

                        })

            </script>

</head>

<body>

            <input type="button" name="button" id="button" class="button" value="Click" />

            <div id="all">I love my country</div>

</body>

</html>

 

Click here for Demo

In this markup the following jQuery code works for show a hidden element. Actually the jQuery code is as follows:

 

 $(document).ready(function(){
    $("#button").click(function(){
      $("#all").show();
    });
 })

 

 

To show and hide:

 

<!DOCTYPE HTML>

<html lang="en-US">

<head>

                <meta charset="UTF-8">

                <title>Hide and Show</title>

                <script src="js/jquery.js"></script>

                <script type="text/javascript">
                    $(document).ready(function(){
                       $("#button").click(function(){
                            $("#all").toggle();
                         });
                     })
                </script>

</head>

<body>
       <input type="button" name="button" id="button" class="button" value="Click" />
       <div id="all">I love my country</div>

</body>
</html>

 

Toggle() is most powerful function to hide a element or visible a hidden element.  Use the following code to show and hide effect.

 

 $(document).ready(function(){
    $("#button").click(function(){
      $("#all").toggle();
    });
 })

Click here for Demo

To add transition effect during show and hide mention duration on milliseconds such as .hide(1500), .show(1500), .toggle(1500).

Advertisements