Hide all DIV's On Click
 

Hello all:

I'm creating an image gallery that opens in hidden divs. Here's my javascript code:

<script type="text/javascript">
<!--
function popupSwitch(szDivID, iState)
{
if(document.layers)
{
document.layers[szDivID].visibility = iState ? "show" : "hide";
}
else if(document.getElementById)
{
var obj = document.getElementById(szDivID);
obj.style.visibility = iState ? "visible" : "hidden";
}
else if(document.all)
{
document.all[szDivID].style.visibility = iState ? "visible" : "hidden";
}
}
// -->
</script>

If the user clicks on this link

<a href="javascript:;" onClick="popupSwitch('popup1',1);" value="Show Div"><img src="images/exterior1_th.jpg" width="127" height="89" border="0"><br>Exterior Photo One</a>

it displays this div:

<div id="popup1" class="popup">
<div align="center"><img src="images/exterior1.jpg"><br>
<b><a href="javascript:;" onClick="popupSwitch('popup1',0);" value="Hide Div"><font size="2">Close
Window [X]</font></a></b><br>
</div>
</div>

As you can see, when the user clicks "Close Window" it will hide the div.

Here's what I'm having trouble with:

if the user clicks on another link to show another DIV without closing the previous one, I need a fuction that will hide all DIV's that might be visible.

I'm a little stumped on this one. Help :-)

Re: Hide all DIV's On Click
 

Create an array. Store the ID of the DIVs into that array when the user makes them visible.

Each time they click a link to make a div visible, iterate through the array, toggling all the other divs.