HTML and CSS Reference
In-Depth Information
An
onclick
attribute in each question term calls a simple function,
faqShowHide
, with an argument consisting of an id selector for the correspond-
ing answer term. he function consists of a single jQuery expression:
$(that).toggle('slow');
Passing the
'slow'
argument to the
toggle
method animates the efect.
“Slow” is not very slow, lasting only about a second. But it is just enough to
provide a visual sense of information revealed without wasting the visitor's
time. Unfortunately, this efect cannot be illustrated on paper, so Figure 5.5
shows how the code in Example 5.5 appears with one of the questions toggled
open. he text is from the New York City Department of Transportation's
website.
Figure 5.5: a FaQ list using toggled content
he questions in Example 5.5 are styled with a few CSS statements to make
it clearer to the site visitor that they are clickable links. Using CSS to prepend a
large Q to each question gives it a nice professional inish.
An accordion list is similar to a toggled list in the same sense that a set of
radio buttons is similar to a set of checkboxes—only one content section is
open at a time. When a diferent trigger element is clicked, any open element
is hidden, and the selected one is revealed. If it is expected that the visitor
