how do I make first Javascript drop down (show div) close when second div is opened?

[zoldos]

I just added the below code to my site:

<script language="JavaScript" type="text/javascript">
function showDiv(){
    if(document.getElementById('showDiv').style.display == 'none'){
        document.getElementById('showDiv').style.display = 'block';
    }else{
        document.getElementById('showDiv').style.display = 'none';
    }
}
</script>

<script language="JavaScript" type="text/javascript">
function showDiv2(){
    if(document.getElementById('showDiv2').style.display == 'none'){
        document.getElementById('showDiv2').style.display = 'block';
    }else{
        document.getElementById('showDiv2').style.display = 'none';
    }
}
</script>

Then called it here:

<span style="cursor:pointer;width:112px;height:50px;" onclick="showDiv();"><img src="/images/siteinfo.png"></span><span style="cursor:pointer;width:164px;height:50px;" onclick="showDiv2();"><img src="/images/anoucements.png"></span>
    <div id="showDiv" style="display:none;">
       <b>You have reached my new site!</b>
    </div>
    <div id="showDiv2" style="display:none;">
      {section name=news_loop loop=$news max=5}
        <table cellpadding='0' cellspacing='0' align='center' width='100%'>
        <tr><td align=center><b>&nbsp;&nbsp;{$news[news_loop].announcement_subject}</b><br><i>{$news[news_loop].announcement_date}</i><br>&nbsp;&nbsp;{$news[news_loop].announcement_body}</td></tr>
		<tr><td><center><img src="./images/line_small.gif"></center></td></tr>
        </table>
      {/section}
    </div>

It works, but if I click one item and don't close it, then click the second item, both will be displayed. I'd like to have the one item/div close when the other is opened. This isn't my code, I copied it from an open source and then modded it. Any help on this would be most appreciated!

 

[ChrisHirst]

Have a routine that closes them all, and rum that before opening another.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[vacunita]

You already have the code to close the divs. Just apply the closing code for one div in the opening function of the other.

function showDiv(){
    if(document.getElementById('showDiv').style.display == 'none'){
//close div 2 when opening div 1
[tab][b][COLOR=#A40000]     document.getElementById('showDiv2').style.display = 'none';[/color][/b]

        document.getElementById('showDiv').style.display = 'block';
    }else{
        document.getElementById('showDiv').style.display = 'none';
    }
}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech