Nigel said:
I've Googled, but can't find what I need, perhaps I asking the wrong
question!
I want a "FAQ" page on a web site, I hate those pages that scroll you to
the answer so and I figured that a good way to do it would be to have
hidden content under each question, something like this [the text in the
brackets should appear when the question is clicked]:
What is the first letter of the alphabet?
[The first letter of the alphabet is "A"]
What is 5 + 5?
[5 + 5 is 10]
I'd like to have each answer loaded, so it appears straight away, and
ideally in a form that I can easily edit.
Any suggestions?
The following shows/hides answers when the question is clicked. It
should be pretty easy to maintain - the answers are only hidden and the
hide/show onclick function is only added if scripting support is
available. Put the styles and script in external files and you have a
very simple page where non-script visitors are not too badly treated.
Each question id needs to have a matching answer id.
The script depends on getElementById and getElementsByTagName, you
should read the group FAQ regarding support for browsers that are
dependent on document.all (e.g. IE 4) if you wish to support them.
<URL:
http://www.jibbering.com/faq/#FAQ4_15>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Q & A </title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<style type="text/css">
..Q, .A {
font-family: verdana, sans-serif;
width: 20em;
}
..Q {
cursor: pointer;
font-weight: bold;
padding: 15px 5px 5px 5px;
color: #333366;
background-color: #CCFFFF;
}
..A {
padding: 5px 5px 15px 5px;
color: #CC0033;
background-color: #FFFF99;
border: 1px solid #6600FF;
}
</style>
<script type="text/javascript">
function initQnA() {
if ( !document.getElementById || !document.getElementsByTagName ) {
return null;
}
var divs = document.getElementsByTagName('div')
var x, i = divs.length;
if ( divs[0].style ) {
while ( i-- ) {
x = divs
;
if ( x.className ) {
if ( 'Q' == x.className ) {
x.onclick = function() {showHideA(this)};
x.title = 'Click to show/hide answer';
} else if ( 'A' == x.className ) {
x.style.display = 'none';
}
}
}
}
}
function showHideA(dQ){
var dAid = 'A-' + dQ.id.split('-')[1];
var dA = document.getElementById(dAid);
dA.style.display = ( 'none' == dA.style.display )? '' : 'none';
}
window.onload = initQnA;
</script>
</head><body>
<div id="Q-1" class="Q">What is the first letter of the alphabet?</div>
<div id="A-1" class="A">[The first letter of the alphabet is "A"]</div>
<div id="Q-2" class="Q">What is 5 + 5?</div>
<div id="A-2" class="A">[5 + 5 is 10]</div>
</body>
</html>
