HTML and CSS Reference
In-Depth Information
Another powerful feature of jQuery is that it enables you to modify styles on the page
on-the-fly. jQuery enables you to modify the page styles indirectly through convenience
methods that hide and show elements, for example, and also enables you to directly mod-
ify the page styles.
Hiding and Showing Elements
For example, you can hide and show elements easily based on activity by the user. Here's
an example page that swaps out two elements whenever they are clicked:
<!DOCTYPE html>
<html>
<head>
<title>
Anchors
</title>
<script src=”jquery-1.4.2.min.js” type=”text/javascript” charset=”utf-
8”></script>
<script type=”text/javascript” charset=”utf-8”>
$(function () {
$(“#closed”).hide();
$(“#open, #closed”).click(function (event) {
$(“#open, #closed”).toggle();
});
});
</script>
</head>
<body>
<div id=”open” style=”padding: 1em; border: 3px solid black; font-size:
300%;”>
We are open
</div>
<div id=”closed” style=”padding: 1em; border: 3px solid black; font-size:
300%;”>
We are closed
</div>
</body>
</html>
The page contains two
<div>
s, one containing the text “We are closed” and one contain-
ing the text “We are open.” In the event handler for the document's ready state, I hide the
<div>
with the ID
closed
:
$(“#closed”).hide();
That method sets the
display
style of the elements matched by the selector to
none
so that when the page finishes loading, that
<div>
will not be visible, as shown in
Figure 16.1.
