Hiding an element by type with a button
The following example
shows you how you make everything inside <div>
elements disappear
when a user clicks a button on your page:
1. Create a Web
page containing the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My Test
Page</title>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript">
$(':submit').click(function () {
$('div').hide();
});
</script>
</head>
<body>
<div>
This will be hidden.</div>
<div>
This will be hidden.</div>
<input value="Hide" type="submit">
</body>
</html>
This code contains two <div> elements and a button.
2. Save the file, and then view it in
your browser.
3. Click the button.
Everything in
both <div> elements is now hidden
Hiding an element by id when clicked
The next example shows you how you make everything inside
a <div> element
with an id disappear when someone clicks that <div> element:
1.
Create a Web page containing the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My Test
Page</title>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript">
$('#hideme').click(function () {
$('#hideme').hide();
});
</script>
</head>
<body>
<div id="hideme">
This will be hidden.</div>
<div>
This will not be hidden.</div>
</body>
</html>
This code contains a <div> element with an id attribute named
hideme. Unlike the preceding example, there is no button.
2. Save the file,
and then view it in your browser.
Refer from Jquery books and google
Thanks..
Refer from Jquery books and google
Thanks..
No comments:
Post a Comment