Jquery Hide and Show


Prev Tutorial Next Tutorial

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


Prev Tutorial Next Tutorial

Advertisements




Download Projects