HTML and CSS Reference
In-Depth Information
would close a toggled element before opening another, an accordion saves him
that efort. However, if the content elements are related, such that the visitor
might want to have more than one revealed at a time, an accordion might be
annoying.
To make the FAQ list of Example 5.5 into an accordion list, replace the sin-
gle expression in the
faqShowHide
function with the following two expressions:
$('#faqs dd').slideUp();
$(that).slideDown('slow');
his code hides all open dd elements before revealing the selected one. he
jQuery methods
slideUp
and
slideDown
are variations of the
hide
and
show
methods, with slightly diferent animations. he
show
method creates a box
whose width and height both increase until it accommodates the content.
he
slideDown
method creates a box initially at its full width; only the height
expands until the box is big enough.
As a inal step, with either the toggle or accordion version, you should pro-
vide CSS styles for printed media that will allow the site visitor to print all the
questions and answers together. For example:
<style type="text/css" media="print">
#faqs dd { display: block }
/* show all of the answers */
p.note { visibility: hidden; }
/* hide the instructions */
</style>
Tabbed content refers to multiple sections of content all occupying the same
place on a page, with only one of the sections visible at any time. Labels along
the top border (tabs) of the common content area promote the corresponding
content section when clicked. In this sense, tabs are not a navigation item but
an organizational tool that replaces navigation to distinct pages in a manner
that saves the site visitor time. Using tabs provides more content for robots,
which can “see” all the sections when they visit the page.
Building a tabbed content section involves HTML, CSS, and JavaScript. In
Examples 5.6a, 5.6b, and 5.6c, a tabbed content section is developed without
the use of any background images for the tab labels. Figure 5.6, shown in a
moment, shows how the tabbed section looks in a browser ater the second tab
label is clicked. he full listing is rather long, so we will start with the HTML
