Jquery Hide and Show
Advertisements
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
Google Advertisment