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
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();
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 */
taBBeD Content SeCtionS
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
Search WWH ::

Custom Search