jquery show()
The jquery show() method is use to show hidden elements of HTML in document. Please note that show method would not show elements which property are set to Hidden, i.e. visibility:hidden.
The elements made hidden by using hide() method or with CSS property display: none; can be shown by using show() method.
Syntax
$(selector).show(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 show () method is completed, an optional callback function to perform certain action can be given.
Example of using show() method
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").show("slow")
});
});
</script>
</head>
<body>
<button class="hidetext">Show yellow line</button>
<div class="text" style="background-color:yellow;display: none;">
This is Yellow line!!
</div>
</body>
</html>
|
Example with callback function
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").show("slow",function(){
alert("Show method executed");
});
});
});
</script>
</head>
<body>
<button class="hidetext">Show yellow line</button>
<div class="text" style="background-color:yellow;display: none;">
This is Yellow line!!
</div>
</body>
</html>
|
Also see: jquery hide() method | jquery toggle() method
Leave A Comment?