jQuery hide() and show()
With jQuery, you can hide and show HTML elements using the hide() and show() methods:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>
</html>Run the program and try it
Syntax:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
Optional speed parameter Specifies the speed of hiding/showing, which can take the following values: "slow (slow)", "fast (fast)" or milliseconds.
The optional callback parameter is the name of the function to be executed after hiding or displaying is completed.
The following example demonstrates the hide() method with the speed parameter:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
});
</script>
</head>
<body>
<button>隐藏</button>
<p>生活就是做出选择，一旦你做出了你的选择，你就必须活在你的决定中。</p>
</body>
</html>Run the program to try it
##jQuery toggle( )
With jQuery, you can use the toggle() method to toggle the hide() and show() methods. Show hidden elements and hide displayed elements:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button>隐藏/显示</button>
<p>真正的失败不是你没有做成事，而是你甘心于失败。</p>
<p>一切都会好起来的，即使不是在今天，总有一天会的。</p>
</body>
</html>Run the program to try itSyntax:
$(selector).toggle(speed,callback);The optional speed parameter specifies the speed of hiding/showing, and can take the following values: "slow", "fast" or milliseconds. The optional callback parameter is the name of the function executed after the toggle() method is completed.
