Q/A Toggle Script

[Kingo]

Hi,

First, please forgive my terrible knowledge of JS! I haven't used it in
years.

I am trying to create a Help page where a new question is on each line,
and when clicking on the question, the answer is written below it.
Click on the question again removes the answer. (Basically the Q/A is
being toggled).
I am using the following JS code for each Question (probably not the
best way):

<script language="JavaScript">
function Help1Toggle() {
if(document.help.help1display.value='N') {
document.getElementById('Help1').innerHTML = '<b>A</b> This is the
answer.';
document.help.help1display.value='Y';
}
else if(document.help.help1display.value='Y') {
document.getElementById('Help1').innerHTML = '';
document.help.help1display.value='N';
}
}
</script>
The HTML on the page is:

<form name="help">
<input type="hidden" name="help1display" value="N">
<a href="javascript:;" onClick="Help1Toggle();"><b>Q</b> This is the
Question?</a><br>
<span id="Help1"></span>
</form>
Now, when the page loads, the Question(s) are displayed (and answers
hidden). Clicking on a Question writes the answer below it properly,
and changes the value of the textbox to Y. Problem is, clicking on the
Question again doesn't do anything. It doesn't change the textbox value
to N, and doesn't hide the question. No JS errors are reported. I've
tried this in both Firefox and IE.

Any ideas/easier ways of doing this?

Cheers,

Kingo

[RobG]

Kingo wrote:

Hi,

First, please forgive my terrible knowledge of JS! I haven't used it in
years.

I am trying to create a Help page where a new question is on each line,
and when clicking on the question, the answer is written below it.
Click on the question again removes the answer. (Basically the Q/A is
being toggled).
Then just toggle display of the answer on/off.

I am using the following JS code for each Question (probably not the
best way):

<script language="JavaScript">
The language attribute is deprecated, type is required.

<script type="text/javascript">

function Help1Toggle() {
if(document.help.help1display.value='N') {
This *sets* the value of the input to 'N' and will always return true.
You need the equality equals operator '==', not the assignment operator '='.

When evaluating whether an expression is equivalent to a string, it is
common to put the string on the left so that if an assignment is
accidentally used, an error will result rather than a permanent true,
i.e. use:

if ('N' == document.help.help1display.value)
Now if you accidentally use '=' you will get an error, which hopefully
you'll find straight away rather than after a bit of testing.

document.getElementById('Help1').innerHTML = '<b>A</b> This is the
answer.';
Allowing auto-wrapping of code nearly always introduces errors, manually
wrap at about 70 characters before posting.

There is no need for innerHTML, put the answer in the page and have it
shown by default. If script support is detected, hide the answers and
use a show/hide toggle. It is also nice to have a 'show all' button.

That way if users don't have JS enabled or supported, they can still see
the answers (it is a help page after all).
[...]
<form name="help">
<input type="hidden" name="help1display" value="N">
<a href="javascript:;" onClick="Help1Toggle();"><b>Q</b> This is the
Do not put script in the href attribute. If you don't want an A
element, don't use one. Use a span or div, then style it like a
'clickable' element, e.g.

<... style="cursor:pointer; text-decoration:underline;" ..>

Question?</a><br>
<span id="Help1"></span>
</form>
Now, when the page loads, the Question(s) are displayed (and answers
hidden). Clicking on a Question writes the answer below it properly,
and changes the value of the textbox to Y. Problem is, clicking on the
Question again doesn't do anything. It doesn't change the textbox value
to N, and doesn't hide the question. No JS errors are reported. I've
tried this in both Firefox and IE.
Because your test always returns true, see above.

Any ideas/easier ways of doing this?

Try this thread:

<URL:http://groups.google.co.uk/group/comp.lang.javascript/tree/browse_frm/thread/f120985776684c7a/a177008767f1e129?rnum=1&q=question+answer+hide&_do ne=%2Fgroup%2Fcomp.lang.javascript%2Fbrowse_frm%2F thread%2Ff120985776684c7a%2Fa177008767f1e129%3Fq%3 Dquestion+answer+hide%26rnum%3D1%26#doc_a177008767 f1e129>

--
Rob
Group FAQ: <URL:http://www.jibbering.com/faq/>

[Kingo]

Thanks, works perfectly.