HTML and CSS Reference
In-Depth Information
jQuery methods such as
toggle
,
hide
, and
show
are useful organizational tools
for placing hidden content in a page that a visitor can bring into view with
a mouse click or inger tap. his keeps pages uncluttered while reducing the
number of page loads a visitor must endure to ind a speciic piece of informa-
tion. Search engine robots, however, see and index all such hidden content on
a page. hese techniques are particularly useful for pages with information
such as frequently asked questions (FAQ) lists, where the questions are always
short text strings and the answers can be anything.
Example 5.5 shows how easy it is to construct a FAQ page with toggled
content. he questions and answers are marked up as a deinition list, with
the questions as the list's terms and the comments as the deinition parts. he
answers are initially hidden by setting their
display
property to
none
. Click-
ing a question causes the answer to low in under the question, pushing the
remaining content down the page to make room. In Example 5.5, the answer
text has been shortened for brevity, but it can include pages' worth of marked-
up content, including links and even other toggled content.
example 5.5: toggled content using jQuery
<!DOCTYPE html>
<html>
<head>
<title>Example 5.5</title>
<style type="text/css">
#faqs dt { color: #060; font: italic 1.2em sans-serif; margin: 0; }
#faqs dt:hover { cursor: pointer; color: blue; }
#faqs dt:before { content: 'Q: '; }
#faqs dt:first-letter { font-size: 150%; }
#faqs dd { display: none; margin: .25em auto 1em 2em; }
p.note { font: small sans-serif; }
</style>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function faqShowHide(that) {
continues
