JavaScript and AJAX Forum

I am using a hidden DIV to hold some "help" info for site users, to be made visible when the user clicks on an image (a question mark icon.) It works, but only after the icon has been clicked twice. After an initial click, the onclick event fires correctly. By the way, I tried using:

style.display = 'block';
and
style.display = 'none';

rather than:
style.visibility = 'visible';
and
style.visibility = 'hidden';

but that causes different rendering problems.

Can someone help me with this?

TIA,

Dennis

============================
Here are 3 variants of the markup on the (question mark icon) image that I have tried. I made the onclick event bold to make it easy to find. All have the same problem/result, as described above.

<a href="javascript;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Quest1','','Images/IconQuestion2_mo.gif',0)" onclick="toggle_visibility2('help_reg_reg');return false;"><img src="Images/IconQuestion2.gif" alt="Help" name="Quest6" width="24" height="23" border="0" id="Quest6" /></a>

<a href onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Quest1','','Images/IconQuestion2_mo.gif',0)" onclick="toggle_visibility2('help_reg_reg');return false;"><img src="Images/IconQuestion2.gif" alt="Help" name="Quest6" width="24" height="23" border="0" id="Quest6" /></a>

<a href onclick="toggle_visibility2('help_reg_reg');return false;"><img src="Images/IconQuestion2.gif" alt="Help" name="Quest6" width="24" height="23" border="0" id="Quest6" /></a>
============================

Here's the javascript function:

<script type="text/javascript" language="javascript">

function toggle_visibility2(id) {
var e = document.getElementById(id);
if(e.style.visibility == 'hidden')
e.style.visibility = 'visible';
else
e.style.visibility = 'hidden';
}
//-->
</script>

============================

Here's the DIV that is initially 'hidden':

<div id="help_reg_reg">
<div class="infonotes">
<div class="helpinfoheader">
<img src="Images/IconQuestion2.gif" alt="help" />&nbsp;Register
</div>
<hr width="80%" align="center" />
Once you have registered, you can log in and start using the advanced features of the site.
</div>
</div>

============================

and here's the CSS for the nested DIVs:

#help_reg_reg {
visibility:hidden;
}

.infonotes {
font-family:Verdana, Arial, Tahoma, sans-serif;
font-size: 80%;
color: #000000;
background-color: #F3EBDE;
border-width:2px;
border-color:#000066;
border-style:solid;
position: relative;
top: 0px;
left: 0px;
padding-left: 4px;
padding-right: 4px;
padding-bottom: 4px;
padding-top: 4px;
display: block;

}