In this guide, you will learn show and hide effects in jQuery. You can show and hide html elements using show() and hide() methods respectively.
jQuery hide()
jQuery hide() method hides the selected html element. In the following example, we are hiding the selected h2 element.
We are calling $(this).hide(); inside this $("h2").click(function(), the $("h2").click(function() method runs when we click an h2 element because we have passed h2 in the jQuery selector $(“h2”). The method $(this).hide(); runs inside the click method and it hides the currently clicked element.
Since this code will only run when an h2 element is clicked, this is why in the following example when you click on an h2 heading, it gets hidden but nothing happens when you click other elements such as paragraphs and button.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("h2").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<h2>jQuery hide() example</h2>
<p>This tutorial is published on BeginnersBook.com</p>
<h2>This is another h2 heading</h2>
<button>Button</button>
</body>
</html>
Output:
When the page is originally loaded, we have not clicked anything yet:
After the first h2 element is clicked:
After the second h2 element is clicked:
jQuery show and hide example
In the following example, we have assigned ids “hide” and “show” to the two buttons hide and show respectively and we are calling click function on these ids, we are using jQuery id selector here.
On the click event on hide button we are hiding the paragraph using $("p").hide();, here we have used element name selector to select all the paragraphs.
On the click event on show button we are displaying the hidden paragraph using show() method like this: $("p").show();.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<h2>jQuery show and hide example</h2>
<p>This tutorial is published on BeginnersBook.com</p>
<button id="hide">hide</button>
<button id="show">show</button>
</body>
</html>
Output:
When nothing is clicked and page is just loaded:
After clicking the hide button:
After clicking the show button:
jQuery hide and show effect with speed parameter
In the above example we have called the hide() and show() method without parameters. However we can pass the parameter in these methods. For example, we can pass the speed values in these methods which can be in milliseconds.
For example: Here we are passing the time to show and hide elements in milliseconds, in the following example, the elements take 2000 milliseconds to be completely hidden and take 3000 milliseconds to be displayed. Alternately we can pass the speed values as “slow” or “fast”.
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide(2000);
});
$("#show").click(function(){
$("p").show(3000);
});
});
Leave a Reply