HTML and CSS Reference
In-Depth Information
FIGURE 16.1
The initial state of
the page. “We are
closed” is hidden.
Then I bind an event handler to the
onclick
event of those
<div>
s containing the follow-
ing code:
16
$(“#open, #closed”).toggle();
As you can see, this selector matches both the IDs
open
and
closed
, and calls the
tog-
gle()
method on each of them. That method, provided by jQuery, displays hidden items
and hides items that are being displayed. So, clicking the
<div>
will cause the other
<div>
to appear and hide the one you clicked. After you click the
<div>
and the two ele-
ments have been toggled, the page appears as shown in Figure 16.2.
FIGURE 16.2
The initial state of
the page. “We are
closed” is hidden.
Retrieving and Changing Style Sheet Properties
You can also modify styles on the page directly. If I change the event handler in the pre-
vious example to contain the following code, the text will be underlined when the user
clicks the
<div>
, as shown in Figure 16.3:
$(this).css(“text-decoration”, “underline”);
FIGURE 16.3
The text is under-
lined after the
user clicks on the
<div>
.
