Hide Content in a table on click of a radio button or checkbox

[Advo]

Basically, ive got information in a table for the layout purposes, as
its text for a questionnaire

What i Need, is for instance when the user click a radio button, that
information can be hidden.

I tried

<div id="myarea" style="visibility:hidden"><STRONG><font
color="#4475AA"> Question 2:</font></STRONG></div> etc

and that works.

but as soon as i try and have a few things with the id myarea so i can
hide text, textareas, images etc within that, it will only hide or show
one item when i do:

<input type=radio name=mytest value=mytest3
onClick='document.getElementById("myarea").style.visibility =
"visible";'> I disagree </input><br>

etc.

I foolishly tried putting that div at the start of my table cells, and
at the end of that question, but that just died. Any ideas please?

 

[Advo]

The only solution I have found, is to put a table within a table cell.
That way the inner table can sit within a <div> which i can hide.

This does what is needed, but then im left with a space in my page when
the table is not visible. Is there a way to have all questions close
together, and then if a user presses the button, the other table will
be visible, and the questions below it will move down?

Thanks

 

[RobG]

Basically, ive got information in a table for the layout purposes, as
its text for a questionnaire

What i Need, is for instance when the user click a radio button, that
information can be hidden.

I tried

<div id="myarea" style="visibility:hidden"><STRONG><font
color="#4475AA"> Question 2:</font></STRONG></div> etc

and that works.

but as soon as i try and have a few things with the id myarea so i can
hide text, textareas, images etc within that, it will only hide or show
one item when i do:

<input type=radio name=mytest value=mytest3
onClick='document.getElementById("myarea").style.visibility =
"visible";'> I disagree </input><br>

An input element has no content or end tag, it is forbidden:

<URL:http://www.w3.org/TR/html4/interact/forms.html#edef-INPUT>


It is also not a good idea to use a radio button by itself (if that's
what you are doing) as once it is checked, you can't uncheck it. A
checkbox is probably more appropriate, then toggle the visibility of
'myarea' depending on whether the checkbox is selected or not:


You might try something like:

<label for="mytest"><input type="checkbox" value=mytest3
name="mytest" id="mytest"
onclick="toggleVis(this.checked, 'myarea');"

I disagree </label>

<script type="text/javascript">

function toggleVis(val, id)
{
var el = document.getElementById(id);
var o;
if ( el && (o = el.style) ){
o.visibility = (val)? 'visible' : 'hidden';
}
}
</script>


However you will still have synchronisation issues in some browsers
when the page is re-loaded - the checkbox may remain checked but the
text gets hidden.

I foolishly tried putting that div at the start of my table cells, and
at the end of that question, but that just died. Any ideas please?

Your problem is likey the result of invalid HTML creating in a DOM that
is different to what you expect (and possibly different in different
browsers too). TD elements can only be children of a TR element, they
can be parents of a div. A div can't be a child (or parent) of a TR.

Your structure should be:

<div>
<table>
...
</table>
</div>

or

<table>
<tr>
<td>
<div> ... </div>
</td>
</tr>
</table>

Use a validator: <URL:http://validator.w3.org/>