Hide/Unhide block according to radio button selection

Hello,

I want to hide/unhide a block according to radio button selection. My code works fine EXCEPT that the initial status of block is active, while I want to be hidden, and appears only when the second radio button is selected. I tried to give style="display:none" to block but this hides it at all:-))
Here is my code:
<input type="radio" checked="checked" name="downloadoption" value="1" onclick="document.getElementById('moreInfo').style.visibility='hidden';" />
Main Download<br />
<input type="radio" name="downloadoption" value="2" onclick="document.getElementById('moreInfo').style.visibility='visible';" />
More Downloads<br />
<div id="moreInfo">
<select name="list" size="10">
..........
</select>
</div>

Thank you
Maria
phpHellasAsked:
Who is Participating?
 
theremonCommented:
Kalispera Maria

try the following code - you had it right when you tried using display:none. You just had to use display in your js too, instead of visibility.
<input type="radio" checked="checked" name="downloadoption" value="1" onclick="document.getElementById('moreInfo').style.display='none';" />
Main Download<br />
<input type="radio" name="downloadoption" value="2" onclick="document.getElementById('moreInfo').style.display='block';" />
More Downloads<br />
<div id="moreInfo" style="display:none">
<select name="list" size="10">
..........
</select>
</div>

Open in new window

0
 
phpHellasAuthor Commented:
Thank you VERYY MUCH!! (Efharistw poly-poly!!)

Maria
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.