By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,638 Members | 1,983 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,638 IT Pros & Developers. It's quick & easy.

Showing hidden answer when question clicked?

P: n/a
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?
--
Nigel M

"Time may be a great healer,
but he's a lousy beautician"
Jul 23 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Nigel Molesworth wrote:
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[i];
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>

--
Rob
Jul 23 '05 #2

P: n/a
In comp.lang.javascript, RobG wrote:
The following shows/hides answers when the question is clicked.


Absolutely fantastic, exactly what I needed. Thank you so much.
--
Nigel M

"Time may be a great healer,
but he's a lousy beautician"
Jul 23 '05 #3

P: n/a
JRS: In article <8p********************************@4ax.com>, dated
Mon, 13 Jun 2005 23:39:49, seen in news:comp.lang.javascript, Nigel
Molesworth <re***@thegroup.com> posted :

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]:


You might prefer that, but will all your possible readers prefer it?

I suggest adding a "Reveal All" button at the top, which on being
clicked changes its label and function to Hide All.

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Jul 23 '05 #4

P: n/a
ASM
RobG wrote:
Nigel Molesworth wrote:
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.

and following would work on my NC4 :-)

<form>
<p>What is 5 + 5?
<input type=button onclick="R_001.value=' 5 + 5 is 10';" value="?">
<input type=text name="R_001">
<p>What is 5 x 5?
<input type=button onclick="R_002.value=' 5 x 5 is 25';" value="?">
<input type=text name="R_002">
</form>
--
Stephane Moriaux et son [moins] vieux Mac
Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.