JavaScript & jQuery: The Missing Manual ... - Robert Guajardo

9 function() {
10 $(this).next('.answer').fadeOut();
11 }
12 ); // end of toggle()
13 }); // end of ready()
14
Now the answer fades out on a second click. Save the page and give it a try.
While the page functions fine, there’s one nice design touch you can add. Currently,
each question has a small plus sign to the left of it. The plus sign is a
common icon used to mean, “Hey, there’s more here.” To indicate that a visitor
can click to hide the answer, replace the plus sign with a minus sign. You can do
it easily by just adding and removing classes from the tags.
9. Add two final lines of code (lines 8 and 12 below). The finished code should
look like this:
1
2
3 $(document).ready(function() {
4 $('.answer').hide();
5 $('#main h2').toggle(
6 function() {
7 $(this).next('.answer').fadeIn();
8 $(this).addClass('close');
9 },
10 function() {
11 $(this).next('.answer').fadeOut();
12 $(this).removeClass('close');
13 }
15 ); //end toggle
15 });
16
This code simply adds a class named close to the tag when it’s clicked the
first time, then removes that class when it’s clicked a second time. The minus
sign icon is defined within the style sheet as a background image. (Once again,
CSS makes JavaScript programming easier.)
Save the page and try it out. Now when you click a question, not only does the
answer appear, but the question icon changes (see Figure 5-6).
chapter 5: action/reaction: making pages come alive with events
www.it-ebooks.info
Tutorial: A One-
Page FAQ
183