How to use Hide and Show Function using jQuery

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 Comment