One javascript used multiple times on same page Question

[vanald04]

Tried searching for the right article and saw some similar questions that if I knew more would probably be helpful, but I couldn't get the coding exactly right for my specific situation. So, thanks in advance for helping me out.

Question - I am implementing a drop down javascript box for photos and would like to duplicate the same script for multiple photos. Looking at the code, I see the interference (ie, the second picture still references the function code from the first script) however, renaming the function and calling it again in the script just switches the first picture to the second picture function.

Website, www.thelampoonjournal.com/news/sports.html - you can see the photo issue coming from below in the "Coming Up" section. How do I alter this code to reuse over and over - what is the call change needed:

[html]
<style type="text/css"> /* the box on top of the box we wish to show - this one hide the second one we set the height as 0.1 to avoid an IE bug when the height is 0.*/
#coverlogin
{
width: 215px;
height: 0.1em;
overflow:hidden;
visibility: hidden;
}

#loginbox
{
width: 215px;
height: auto;
border: 0px solid red;
background-color: #535353;
color:white;
}

</style>
<script type="text/javascript">

var hh=0;var inter;

//we show the box by setting the visibility of the element and incrementing
the height smoothlyfunction

ShowBox()
{
//Depending on the amount of text, set the maximum height here
in pixels
if(hh==80)
{
clearInterval(inter);
return;
}
obj = document.getElementById("coverlogin");
obj.style.visibility = 'visible'; hh+=2;
obj.style.height = hh + 'px';}

//same way as above but reversedfunction HideBox()

{
obj = document.getElementById("coverlogin"); if(hh==2) {
obj.style.visibility = 'hidden';
obj.style.height = '0.1em';
clearInterval(inter); return; } hh-=2;
obj.style.height = hh + 'px';
}

</script>
<!-- set an interval for the increment of the height by clicking onto this link -->
<a href="#" onclick="inter=setInterval('ShowBox()',3);return false;">
Click here to show the box</a>
<div id="coverlogin">
<div id="loginbox"><span class="style110">Texas Tech students leave ‘Physics 201’ class 5 minutes early after accidentally misreading the clock. </span>
<a href="#" onClick="inter=setInterval('HideBox()',3);return false;">Close It</a>
</div>
</div>
[/html]

[acoder]

Change ShowBox and HideBox to accept parameters and pass the ID of the div to be shown. Then within the function, change the line which gets the element by its id to use the passed string instead.

[vanald04]

Change ShowBox and HideBox to accept parameters and pass the ID of the div to be shown. Then within the function, change the line which gets the element by its id to use the passed string instead.

Got it to work, thanks. All I really did is change all the commands, even in the css part to coverbox2 / loginbox2 / Showbox2 () / Hidebox2 () for everywhere they were in the script and it works now - www.thelampoonjournal.com/sports - and did it "3" for each section in the third and it works separately now.

Thanks again for your response, the help is really appreciated. My html is pretty sloppy, so my next job is to clean it up a bit.

[acoder]

It seems a bit redundant to have three sets of functions when you could have just one. While you're cleaning up the HTML, you should try to improve the JavaScript code too by reusing the two functions for all photos.