Thanks, the terms are key.
What I am trying to find are great examples. This is the best I could find:
code example:
http://www.sitepoint.com/forums/showthread.php?t=198742
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>untitled</title>
<style type="text/css">
body {
font-size: 100%;
color: #fff;
margin: 40px;
background: #562;
}
a:link, a:visited, a:active {
display: block;
width: 560px;
margin: 8px 0;
font: normal .8em verdana, arial, sans-serif;
color: #efc;
}
a:hover {
color: #ffe;
}
a img {
position: relative;
top: 4px;
border-width: 0;
}
..FAQ {
display: none;
width: 560px;
font: normal .7em verdana, arial, sans-serif;
color: #fff;
text-align: justify;
padding: 5px;
border: 1px #000 solid;
background: #a94;
}
..n {
font-weight: bold;
color: #aa6;
}
..non {
font-weight: bold;
color: #0f0;
}
#hideall {
display: none;
}
</style>
<script type="text/javascript">
function disp(ans_id, hide_id, show_id)
{
var i = 0, el,
els = document.getElementsByTagName('div'),
answer = document.getElementById(ans_id);
while (el = els[i++])
{
if (el.className.match(/\bFAQ\b/))
if (answer)
el.style.display = (el == answer) ? 'block' : 'none';
else el.style.display = (hide_id == 'showall') ? 'block' : 'none';
}
if (disp.islit)
disp.islit.className = 'n';
disp.islit = document.getElementById('n' + (ans_id || 'hideall'));
disp.islit.className = 'non';
document.getElementById(hide_id || 'hideall').style.display = 'none';
document.getElementById(show_id || 'showall').style.display = 'block';
return false;
}
</script>
</head>
<body>
<h2>FAQs</h2>
<a href="checks.html" onclick="return disp('checks')">
|<span id="nchecks" class="n">1</span>| What is the deadline for writing a
check to a vendor or employee each week?</a>
<div id="checks" class="FAQ">The accounting department writes checks on
Thursday afternoons. To ensure that an expenditure is included among.</div>
<a href="cash.html" onclick="return disp('cash')">
|<span id="ncash" class="n">2</span>| How much cash do you have in your
pocket?</a>
<div id="cash" class="FAQ">About $400, and in my other pocket I have a .38
so don't hold your breath about the $400....</div>
<a href="car.html" onclick="return disp('car')">
|<span id="ncar" class="n">3</span>| Can I borrow your car for the weekend,
I need to go to Mexico? And...I need about $400 -in cash - and your
passport, and a case of Corona. Please.<img
src="
http://www.sitepoint.com/forums/images/smilies/bawling.gif" /></a>
<div id="car" class="FAQ"><u>Borrow</u> my car? You can <em>have</em> my car
if you promise to drive it over a cliff in Mexico! <img
src="
http://www.sitepoint.com/forums/images/smilies/xeye.gif" /><br /><br
/>On the other hand - aboutit.</div>
<br />
<a id="showall" href="all.html" onclick="return
disp('','showall','hideall')">
|<span id="nshowall" class="n">4</span>| show all <img
src="
http://www.sitepoint.com/forums/images/smilies/eek.gif" /></a>
<a id="hideall" href="#" onclick="return disp('','hideall','showall')">
|<span id="nhideall" class="n">4</span>| hide all <img
src="
http://www.sitepoint.com/forums/images/smilies/redface.gif" /></a>
</body>
</html>
