jQuery hide and show
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.
