How to use Hide and Show Function using jQuery

March 17, 2020 royalrahul007 1 Comment hide, jquery, jquery accordion, jquery ajax, jquery alert, jquery hover

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>