in this article, you will learn How to use Hide and Show Function using jQuery. Using hide or show function you can hide or show any content in HTML document.
Example:-
<html>
<head>
<title>Hide Show Function</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If click on the "Hide" button, it will be hide and if click on show button it will be show.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
Hide or Show function using Speed
<html>
<head>
<title>Hide and Show Function using Speed</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
$("#show").click(function(){
$("p").show(1000);
});
});
</script>
</head>
<body>
<button>Hide</button>
<button id="show">show</button>
<p>Hide and Show Function using Speed.</p>
</body>
</html>
1 thought on “How to use Hide and Show Function using jQuery”