show/hide script > allow only 1 open div at the time

Hello -

I have a show/hide script working nicely, but currently it is allowing more than 1 div to be opened at the time. How can I get it to collapse/hide one div when another is expanded?

Here is sample code:

The JavaScript:
--------------

// SHOW / HIDE CONTENT FUNCTION

function HideContent(d) {document.getElementById(d).style.display = "none";}
function ShowContent(d) {document.getElementById(d).style.display = "";}
function ReverseContentDisplay(d) 
{if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = ""; 
}else { document.getElementById(d).style.display = "none"; }}

Code (markup):

The HTML:
----------
Trigger link:

<a href="javascript:ReverseContentDisplay('ca')">California</a>

Code (markup):

Hidden div:

<div id="ca" class="city-list" style="display:none;">
                  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="purple">
                    <tr>
                      <td colspan="5" align="right" valign="bottom"><a href="javascript:HideContent('ca')"><img src="assets/img/x-2.gif" alt="x" width="14" height="11" vspace="5" hspace="10" /></a></td>
                    </tr>
                    <tr>
                      <td width="30%"><a href="#">Alameda</a></td>
                      <td width="5%">&nbsp;</td>
                      <td width="30%"><a href="#">Indio</a></td>
                      <td width="5%">&nbsp;</td>
                      <td width="30%"><a href="#">Redlands</a></td>
                    </tr>
                    <tr>
                      <td><a href="#">Culver City</a></td>
                      <td>&nbsp;</td>
                      <td><a href="#">Mission Viejo</a></td>
                      <td>&nbsp;</td>
                      <td><a href="#">San Ramon</a></td>
                    </tr>
                    <tr>
                      <td><a href="#">Hancock Park</a></td>
                      <td>&nbsp;</td>
                      <td><a href="#">Palm Springs</a></td>
                      <td>&nbsp;</td>
                      <td><a href="#">Studio City</a></td>
                    </tr>
                    <tr>
                      <td colspan="5">&nbsp;</td>
                    </tr>
                  </table>
                </div>

Code (markup):

Any help is greatly appreciated!

Thanks,
oslofish

 

Would this help???
only quickly put together.


<script>// SHOW / HIDE CONTENT FUNCTION

function HideContent(d) {document.getElementById(d).style.display =

"none";}
function ShowContent(d) {document.getElementById(d).style.display =

"";}
function ReverseContentDisplay(d)
{if(document.getElementById(d).style.display == "none") {

document.getElementById(d).style.display = "";
}else { document.getElementById(d).style.display = "none"; }}
</script>

<a href="javascript:ReverseContentDisplay('ca');

ReverseContentDisplay('ca2');">Panel1</a> |
<a href="javascript:ReverseContentDisplay('ca');

ReverseContentDisplay('ca2');">Panel2</a>





<div id="ca" class="city-list">
<table width="100%" border="0" cellspacing="0"

cellpadding="0" class="purple">
<tr>
<td colspan="5" align="right" valign="bottom"><a

href="javascript:ReverseContentDisplay('ca');

ReverseContentDisplay('ca2');">x</a></td>
</tr>
<tr>
<td width="30%"><a href="#">object #1</a></td>
<td width="5%">&nbsp;</td>
<td width="30%"><a href="#">object #2</a></td>
<td width="5%">&nbsp;</td>
<td width="30%"><a href="#">object #3</a></td>
</tr>
<tr>
<td><a href="#">object #4</a></td>
<td>&nbsp;</td>
<td><a href="#">object #5</a></td>
<td>&nbsp;</td>
<td><a href="#">object #6</a></td>
</tr>
<tr>
<td><a href="#">object #7</a></td>
<td>&nbsp;</td>
<td><a href="#">object #8</a></td>
<td>&nbsp;</td>
<td><a href="#">object #9</a></td>
</tr>
<tr>
<td colspan="5">&nbsp;</td>
</tr>
</table>
</div>




<div id="ca2" class="city-list2" style="display:none;">
<table width="100%" border="0" cellspacing="0"

cellpadding="0" class="purple">
<tr>
<td colspan="5" align="right" valign="bottom"><a

href="javascript:ReverseContentDisplay('ca');

ReverseContentDisplay('ca2');">x</a></td>
</tr>
<tr>
<td width="30%"><a

href="#">item #1</a></td>
<td width="5%">&nbsp;</td>
<td width="30%"><a href="#">item #2</a></td>
<td width="5%">&nbsp;</td>
<td width="30%"><a href="#">item #3</a></td>
</tr>
<tr>
<td><a href="#">item #4</a></td>
<td>&nbsp;</td>
<td><a href="#">item #5</a></td>
<td>&nbsp;</td>
<td><a href="#">item #6</a></td>
</tr>
<tr>
<td><a href="#">item #7</a></td>
<td>&nbsp;</td>
<td><a href="#">item #8</a></td>
<td>&nbsp;</td>
<td><a href="#">item #9</a></td>
</tr>
<tr>
<td colspan="5">&nbsp;</td>
</tr>
</table>
</div>