In this post we are exploring more about
jQuery Show() and Hide() function.
jQuery lets we
show and
hide page elements
easily. We can hide a page element with the
hide( )
function, which we use with a
selector like this.
We can use the show( ) function to show page elements that have been hidden.
Below code example puts for see above jQuery Show() and Hide() function working.
jqscript.html
<html>
<head>
<title>
Hide and show
paragraphs
</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function hide() {
$('p:first').hide();
}
function show() {
$('p:first').show();
}
</script>
</head>
<body>
<h1>Hide and show paragraphs</h1>
<div>
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>
<p>This is paragraph 4.</p>
</div>
<form>
<input type="button" value="Hide
paragraph"
onclick="hide( )"
</input>
<input type="button" value="Show
paragraph"
onclick="show( )"
</input>
</form>
</body>
</html>
Output:
No comments:
Post a Comment
Please do not enter any spam link in the comment box.