Introduction:

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

Description:

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

Let’s see simple Example:

jQuery  hide() Method

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Example of jQuery </title>
    <script src="Scripts/jquery-1.7.1.min.js"></script>    <script type="text/javascript">        $(document).ready(function () {
    $("#btnhide").click(function () {
      $("p").hide();            });        });    </script>
</head>
<body>
    <div>
        <input id="btnhide" type="button" value="Hide" /></div>
     <p style="width: 400px;text-align: justify;">         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:


hide element using jquery



You can also specify the duration as speed  parameter for making the jQuery  hide 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  hide() 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.7.1.min.js"></script> 
    <script type="text/javascript">        $(document).ready(function () {
     $("#fasthide").click(function () {
         $("p.fast").hide("fast");
      });
       $("#slowhide").click(function () {
           $("p.slow").hide("slow");
        });        });
    </script>
</head>
<body>
    <div>
        <input id="fasthide" type="button" value="Fast hide" />
         <input id="slowhide" type="button" value="Slow hide" /></div>
     <b>Slow paragraph</b>
     <p class="slow" style="width: 400px;text-align: justify; border:1px solid #000;">
         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;">        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:


hide element using jquery


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

 

Let’s see simple Example:

jQuery  hide() 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.7.1.min.js"></script> 
    <script type="text/javascript">        $(document).ready(function () {
     $("#btnhide").click(function () {
         $("p").hide("slow", function () {
                 // Code to be executed
              alert("The hide effect is completed.");
          });
      }); });
    </script>
</head>
<body>
    <div>        <input id="btnhide" type="button" value="hide" />        </div>
 
     <b>Call back paragraph</b>     <p style="width: 400px;text-align: justify;">         Lorem Ipsum is simply dummy text of the printing and typesetting industry.           </p>
  
</body>
</html>


OutPut:


hide element using jquery


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