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

[oslofish]

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"; }}

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

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

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>

Your help would be greatly appreciated!

Thanks,
oslofish

[chris_fuel]

I think I know what you're attempting to do but don't want to guess. Can you link to a screenshot of the issue?

[oslofish]

Chris,

Here is a screenshot of the issue:



Just a note: the top div belongs to Alabama, the bottom one to Massachussets (the correct cities for each State will be pulled from a database later on).


Hope this helps clarify the problem!

Thanks,
oslofish

[johnmanoahs]

The solution wud be to have a variable to store the currently open div's id. When opening another div, first close the div that is stored in that variable.

e.g.

var intCurrentOpenID;

function fn_OpenDiv(thisID)
{
 //First hide the currently open div 
 document.getElementById(intCurrentOpenID).style.display = 'none';
 
 //Then open the div that u want to show
 document.getElementById(thisID).style.display = 'block';
 
 //Set the ID to the variable
 intCurrentOpenID = thisID;
}

Hope this is what you are trying to acheive.

- John

[oslofish]

John -

Tried to integrate your code in to my current script (first post), but it did not make a difference. This is what I did:

var intCurrentOpenID;

function fn_OpenDiv(thisID)
{
 //First hide the currently open div 
 document.getElementById(intCurrentOpenID).style.display = 'none';
 
 //Then open the div that u want to show
 document.getElementById(thisID).style.display = 'block';
 
 //Set the ID to the variable
 intCurrentOpenID = thisID;
}

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

Here is the "old" script in action. You'll probably see what I mean when you click on the various states (without manually closing it by clicking on the link again, or hitting the "X"):

http://www.malernltd.net/tine/show-hide.html


oslofish

[johnmanoahs]

I apologize that I couldnt find time to really debug and see whats wrong. On the other hand, I thought I will create a sample quickly for you to build upon the function!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>

<script>
var intCurrentOpenID = 'link1';

function fn_OpenDiv(thisID)
{
 //First hide the currently open div 
 document.getElementById(intCurrentOpenID).style.display = 'none';
 
 //Then open the div that u want to show
 document.getElementById(thisID).style.display = 'block';
 
 //Set the ID to the variable
 intCurrentOpenID = thisID;
}
</script>
</HEAD>

<BODY>
<table width="100%" border="1">
	<tr>
		<td width="50%" align="center"><a href="javascript: fn_OpenDiv('link1')">Link 1</a></td>
		<td width="50%" align="center">Link 2</td>
	</tr>
	<tr>
		<td width="100%" colspan="2" id="link1" style="display: none;">LINK 1 & 2</td>
	</tr>
	<tr>
		<td width="50%" align="center"><a href="javascript: fn_OpenDiv('link2')">Link 3</a></td>
		<td width="50%" align="center">Link 4</td>
	</tr>
	<tr>
		<td width="100%" colspan="2" id="link2" style="display: none;">LINK 3 & 4</td>
	</tr>
</table>
</BODY>
</HTML>

edit: Just note to add a default value to the intCurrentOpenID when you declare. It can be the ID of the first div or can be null and dealt within the function accordingly.

- John

[oslofish]

John -

Thank you! That works beautifully