Jquery Hide and Show

Advertisements

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

Google Advertisment

Buy This Ad Space @$20 per Month, Ad Size 600X200 Contact on: hitesh.xc@gmail.com or 9999595223

Magenet is best Adsense Alternative here we earn $2 for single link, Here we get links ads. Magenet

For Projects 9999595223

Google Advertisements


Buy Websites 9999595223

Buy College Projects with Documentation Contact on whatsapp 9999595223. Contact on: hitesh.xc@gmail.com or 9999595223 Try this Keyword C++ Programs

Advertisements