What is the jquery hide() method?
JQuery inbuilt hide() method is used to hide the selected elements.
What is the syntax of hide() ?
$(selector).hide(speed,easing,callback)
selector – this is the html element.
hide() – jquery method
There are 3 params for the hide() method.
1. speed
2. easing (optional)
3. callback
1. speed
This defines the speed of the hide element.
By default this will be 400 milliseconds.
2. easing (optional)
This defines the speed of the element at different point of animation.
3. callback
This defines the call back function to be executed after hide operation.
1. Hiding elements using the hide() method
Example 1 :
<!DOCTYPE html>
<html>
<head>
<title>Our title</title>
<style>
#dId-1{
width: 30%;
height: 30%;
text-align:center;
padding: 20px;
margin: 10px;
border: 2px solid green;
font-size: 20px;
}
#dId-2{
width: 30%;
height: 30%;
text-align:center;
margin: 10px;
border: 2px solid green;
padding: 20px;
font-size: 20px;
}
.b1, .b2, .b3, .b4, .b5{
width:100px;
height:30px;
font-size: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".b1").click(function(){
$(".p1").hide();
});
$(".b2").click(function(){
$(".p2").hide();
});
$(".b3").click(function(){
$(".p3").hide();
});
$(".b4").click(function(){
$(".p4").hide();
});
$(".b5").click(function(){
$(".p5").hide();
});
});
</script>
</head>
<body>
<div id="dId-1">
<p class="p1">This is paragraph 1</p>
<p class="p2">This is paragraph 2</p>
<p class="p3">This is paragraph 3</p>
<p class="p4">This is paragraph 4</p>
<p class="p5">This is paragraph 5</p>
</div>
<div id="dId-2">
<p><button class="b1">Button 1</button> Click to hide Paragraph1</p>
<p><button class="b2">Button 2</button> Click to hide Paragraph2</p>
<p><button class="b3">Button 3</button> Click to hide Paragraph3</p>
<p><button class="b4">Button 4</button> Click to hide Paragraph4</p>
<p><button class="b5">Button 5</button> Click to hide Paragraph5</p>
<div>
</body>
</html>
Output :
1. Before buttons are clicked
2. After buttons are clicked insert image2
Jquery tutorial for beginners !!!
Click to Learn More about – online learn jquery
2. Passing params to the hide() method
Example 2 :
<!DOCTYPE html>
<html>
<head>
<title>Our title</title>
<style>
#dId-1{
width: 30%;
height: 30%;
text-align:center;
padding: 20px;
margin: 10px;
border: 2px solid green;
font-size: 20px;
}
#dId-2{
width: 30%;
height: 30%;
text-align:center;
margin: 10px;
border: 2px solid green;
padding: 20px;
font-size: 20px;
}
.b1, .b2, .b3, .b4, .b5{
width:100px;
height:30px;
font-size: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".b1").click(function(){
$(".p1").hide(1000,function(){
alert("Paragraph 1 is hidden successfully");
});
});
$(".b2").click(function(){
$(".p2").hide(1000,function(){
alert("Paragraph 2 is hidden successfully");
});
});
$(".b3").click(function(){
$(".p3").hide(1000,function(){
alert("Paragraph 3 is hidden successfully");
});
});
$(".b4").click(function(){
$(".p4").hide(1000,function(){
alert("Paragraph 4 is hidden successfully");
});
});
$(".b5").click(function(){
$(".p5").hide(1000,function(){
alert("Paragraph 5 is hidden successfully");
});
});
});
</script>
</head>
<body>
<div id="dId-1">
<p class="p1">This is paragraph 1</p>
<p class="p2">This is paragraph 2</p>
<p class="p3">This is paragraph 3</p>
<p class="p4">This is paragraph 4</p>
<p class="p5">This is paragraph 5</p>
</div>
<div id="dId-2">
<p><button class="b1">Button 1</button> Click to hide Paragraph1</p>
<p><button class="b2">Button 2</button> Click to hide Paragraph2</p>
<p><button class="b3">Button 3</button> Click to hide Paragraph3</p>
<p><button class="b4">Button 4</button> Click to hide Paragraph4</p>
<p><button class="b5">Button 5</button> Click to hide Paragraph5</p>
<div>
</body>
</html>
Output :
