JavaScript - Showhide

Hey Guys,

While I've been lurking around the forums in CSS and Flash this is my first post regarding Javascript. I'm setting up a navigation that displays its sub-links once you click the Navigation option, and am trying to tweak the code.

The Site: http://www.psychreview.net

Where to Look: The top right navigation. It works correctly, but they layer on top of each other - I'd like the user to click one of the toggles, and have the toggle show the right div AND hide the other two divs.

The Javascript: (I use three functions because eventually I'll be swapping the images you click while the div's are active).

Code:

// JavaScript Document

function toggle1(showHideDiv, switchImgTag) {
        var ele = document.getElementById(showHideDiv);
        var imageEle = document.getElementById(switchImgTag);
        if(ele.style.display == "block") {
                ele.style.display = "none";
		imageEle.innerHTML = '<img src="http://www.psychreview.net/wp-content/themes/ReView/images/nav_home.png">';
        }
        else {
                ele.style.display = "block";
                imageEle.innerHTML = '<img src="http://www.psychreview.net/wp-content/themes/ReView/images/nav_home.png">';
        }
}

function toggle2(showHideDiv, switchImgTag) {
        var ele = document.getElementById(showHideDiv);
        var imageEle = document.getElementById(switchImgTag);
        if(ele.style.display == "block") {
                ele.style.display = "none";
		imageEle.innerHTML = '<img src="http://www.psychreview.net/wp-content/themes/ReView/images/nav_publications.png">';
        }
        else {
                ele.style.display = "block";
                imageEle.innerHTML = '<img src="http://www.psychreview.net/wp-content/themes/ReView/images/nav_publications.png">';
        }
}

function toggle3(showHideDiv, switchImgTag) {
        var ele = document.getElementById(showHideDiv);
        var imageEle = document.getElementById(switchImgTag);
        if(ele.style.display == "block") {
                ele.style.display = "none";
		imageEle.innerHTML = '<img src="http://www.psychreview.net/wp-content/themes/ReView/images/nav_resources.png">';
        }
        else {
                ele.style.display = "block";
                imageEle.innerHTML = '<img src="http://www.psychreview.net/wp-content/themes/ReView/images/nav_resources.png">';
        }
}

The html:

Code:

<!-- Navigation -->
<div id="nav">

	<!-- Navigations Links -->
    <a href="javascript:toggle1('nav_home_contents', 'imageDivLink');"><img src="http://www.psychreview.net/wp-content/themes/ReView/images/nav_home.png"></a>
    <a href="javascript:toggle2('nav_publications_contents', 'imageDivLink');"><img src="http://www.psychreview.net/wp-content/themes/ReView/images/nav_publications.png"></a>
    <a href="javascript:toggle3('nav_resources_contents', 'imageDivLink');"><img src="http://www.psychreview.net/wp-content/themes/ReView/images/nav_resources.png" class="padding"></a>

</div>
           
	<!-- Navigation Drop Downs -->
    <div class="nav_contents" id="nav_home_contents">
        <ul>
        	<li><a href="http://www.psychreview.net/about/mission">About Us: Mission</a></li>
            <li><a href="http://www.psychreview.net/about/about-the-authors">About Us: About the Authors</a></li>
            <li><a href="#">ReView SpotLight</a></li>
		</ul>
        <ul>
        	<li><a href="#">Moment in ReView</a></li>
            <li><a href="http://www.psychreview.net/contact-us">Contact Us</a></li>
            <li class="spacer">&nbsp;</li>
        </ul>
    </div>
    
    <div class="nav_contents" id="nav_publications_contents">
        <ul>
        	<li><a href="http://www.psychreview.net/search">Search Publications</a></li>
            <li><a href="#">Featured Article</a></li>
            <li><a href="http://www.psychreview.net/publications/free-articles">Free Articles</a></li>
		</ul>
        <ul>
        	<li><a href="http://www.psychreview.net/publications/request-a-topic">Request A Topic</a></li>
            <li><a href="http://www.psychreview.net/publications/for-contributing-authors">For Contributing Authors</a></li>
            <li class="spacer">&nbsp;</li>
        </ul>
    </div>

    <div class="nav_contents" id="nav_resources_contents">
        <ul>
        	<li><a href="http://www.psychreview.net/resources/other-online-resources">Other Online Resources</a></li>
            <li><a href="#">Definition of Terms</a></li>
            <li class="spacer">&nbsp;</li>
		</ul>
    </div>

Every time the user clicks one of the toggles, I want it to not only show the right div, but hide the other two. Any suggestions? Thanks guys.

Hello.
I have a submit-button: When clicked after validation i want the div containing button to hide and at the same time a new div to appear.

With this code i can make the div with button disappear, but i cant get the hidden div to show up instead.

Where am i going wrong? Im not too familiar with js..
JAVASCRIPT
<!--script to close-button-->
<script type="text/javascript" >
function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}

<!--NOT WORKING script that should open-div-->
function showhide(elementid){
if (document.getElementById(elementid).style.display == 'block'){
document.getElementById(elementid).style.display = 'none';
}else{
document.getElementById(elementid).style.display = 'block';
}
}
</script>

CSS
#info-visible {
position: absolute;
z-index: 1000;
left: 200px;
top: 100px;
width: auto;
height: auto;
border: 2px solid #888;
background: #000099;
}
#target {
display: none;
position: absolute;
z-index: 1000;
left: 500px;
top: 100px;
width: 400px;
height: 400px;
border: 2px solid #888;
background: #009900;
}

HTML
<div id="info-visible" >
<p>visible div</p>
<FORM NAME="submission" onSubmit="return myfunction()" action="javascript:showHide('info-visible'); showHide('target')" >
<INPUT NAME="textfield" TYPE="TEXT">
<INPUT TYPE="SUBMIT" >
</FORM>
</div>

<div id="target"><p>hidden div</p></div>

Greetings.
I"m having trouble trying to create a crossbrowser vertical menu with "showhide" submenus. When moving cursor above the submenu in Opera browser, it sometimes disappears. See here. I only guess it's because of hidden divs which however listen to the onmouseout event
The code:
Code:

<script language="javascript">
<!--
function rolldown(number){
/*close others*/
for (i=1;i<=11;i=i+1){
var id='m' + i;
if(i != number){ document.getElementById(id).style.display='none';}
}
/*open this*/
var id='m' + number;
document.getElementById(id).style.display='inline';
}
-->
</script>

And the menu sections and submenus go like this:
Code:

<li onmouseover="rolldown(1);" class="m1"><a href="home.php">home</a>
	</li>
<div id="m1" class="m1" onmouseover="rolldown(1);" onmouseout="javascript:document.getElementById('m1').style.display='none';">
<a href="1.php">1</a>
<br /><a href="2.php">2</a>
</div>

I tried to resolve the issue by destroying the divs' innerHTML, but the fun is it still works in my firefox but opera now even doesn't show the submenus. See here.
My code for the latter changed to this:

Code:

function rolldown(number){
/*close others*/
for (i=1;i<=11;i=i+1){
var id='m' + i;
if(i != number){
document.getElementById(id).style.display='none';
document.getElementById(id).innerHTML='';
}
}


/*open this*/
if(number!=0){
var id='m' + number;
//definition of concrete submenus

switch(number)
 {
 case 1:
var htmlstring='<a href="a1.php">a1</a><br /><a href="a2.php">a2</a>';
   break;
 case 2:
var htmlstring='<a href="b1.php">b1</a><br /><a href="b2.php">b2</a>';
   break;
 default:
var htmlstring='';
 }

document.getElementById(id).innerHTML=htmlstring;
document.getElementById(id).style.display='inline';
}
}

Can you help solve this whatever way? Thank you!!