Hide and Show

Using jQuery, you can hide and show Html elements. jQuery have hide() and show() methods which are used to hide and show Html elements respectively.

Syntax

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
  • Here speed parameter is optional, speed parameter specifies the speed of the hiding/showing, and can take values: "slow", "fast", or milliseconds.
  • callback parameter is optional, callback parameter is a function to be executed after the hide() or show() method completes.

Hide Html elements

Using hide() method you can hide Html element.

Example of hide elements

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
    });
});
</script>
</head>
<body>

<h2>jQuery Code</h2>

<p>This is My first jQuery code</p>

<button>Click me</button>

</body>
</html>

Output

jQuery Code

This is My first jQuery code

Hide and show html elements

Example of hide and show elements

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
});
</script>
</head>
<body>

<h2>jQuery Code</h2>

<p>This is My first jQuery code</p>

<button id="hide">Hide</button>
<button id="show">Show</button>

</body>
</html>

Output

jQuery Code

This is My first jQuery code