Quick Reach
What is jQuery hide() method?
The jQuery hide() method hides specified HTML elements like DIV, paragraphs or others. That can be used to make user’s experience better in order to provide them facility what to show and what to not in a website besides other uses.
Syntax of using the $.hide() method
$(selector).hide(speed,callback)
Where
Selector = can be an element like div, p, etc.
Speed = Optional parameter that specifies the hide speed with possible values of
- “slow”
- “fast”
- Or value in milliseconds
Callback = after the hide () method is completed, an optional callback function to perform a certain action can be given.
Running Example of jQuery hide() method
In this example, we will use jquery hide method to hide DIV with name “text” after clicking “Hide yellow line” button.
Just copy paste below code to a new HTML file and name it like test_hide.html or click the link below to see the online demo.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!DOCTYPE html>
<head>
<title>jQuery Testing</title>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script type=“text/javascript” language=“javascript”>
$(document).ready(function() {
$(“.hidetext”).click(function () {
$(“.text”).hide(“slow”);
});
});
</script>
</head>
<body>
<button class=“hidetext”>Hide yellow line</button>
<div class=“text” style=“background-color:yellow;”>
This is Yellow line!!
</div>
</body>
</html>
|
Example of the hide method with callback function
In this example, as you click the “Hide yellow line” button, the yellow line will disappear. After that, the callback function will execute that will display an alert:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPE html>
<head>
<title>jQuery Testing</title>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script type=“text/javascript” language=“javascript”>
$(document).ready(function() {
$(“.hidetext”).click(function () {
$(“.text”).hide(“slow”,function(){
alert(“Hide method executed”);
});
});
});
</script>
</head>
<body>
<button class=“hidetext”>Hide yellow line</button>
<div class=“text” style=“background-color:yellow;”>
This is Yellow line!!
</div>
</body>
</html>
|
Also see: jQuery show() method | jQuery toggle() method
Leave A Comment?