Member Avatar for RustyShock

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 :-)

Edited by happygeek because: fixed formatting
  • 2 Contributors
  • 1 Reply
  • 168 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by tgreer
Member Avatar for tgreer

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.