How to Use Hide and Show Function in JQuery With Example?

As the name itself suggests, through hide and show, You can hide and show any element.

Hide/Show Use in Jquery, use hide() function by jquery, use show() function by jquery, jquery effects hide and show method

For example, suppose we have paragraphs and two buttons together.The first button has a paragraph show while the second button has a paragraph hide.So it is all amazing to know through both Events and Effect.

The most important thing is that you can show and hide the HTML Element through hide and show.In jQuery, hide is defined by hide() and show by show().Now let us see an example.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will show Experts PHP.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
 

After that we used jQuery and used Event and Effect in it.We have used click event. At the same time, two effect show () and hide () are used.Now as soon as we click on the button, the function runs,And the event is performed according to whatever command is given.

Speed ​​in effects means that how much speed should be performed in effects.This speed can be both fast and slow.

Keep in mind that the speed here is in miliseconds.This means that 1000 ms = 1sec.If you define 1000 speed, it will be 1sec.

Example:-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide(1000);
});
$("#show").click(function(){
$("p").show(1000);
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will show Experts PHP.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>