Toggle an element's display(show/hide multiple display help!)

[Icy Garnet]

Greetings.

I will explain my problem as clearly as possible, i'm not very good with java, and am having a hard time with this particular function.

I basically want several show/hide toggles. When you click one link on a page (or picture in my case), I want it to show the hidden text. then for another part of the site, when you click on a different picture it will show the hidden text for that particular section, different from the first toggle. I need three of these, all within the same shtml .txt include. (All able to be shown/hidden on the same page, whenever clicked.)

I have the code for one of the toggles, and have attempted to create another, but the second toggle keeps showing the first. I do better with examples, and google wasn't able to provide me with any =P Any examples of showing multiple toggle elements would be greatly apreciated. here is my example:


<td height="19"><div align="right"> <font color="#999999" size="2" face="Arial"><a href="javascript: toggle()"><img src="images/games.jpg" width="133" height="29" border="0"></a></font>
<div align="left" id='div1' style='display:none'>
<table width="188" height="133" border="0" cellpadding="0" cellspacing="0" dwcopytype="CopyTableRow">
<tr>
<td height="19"><div align="right"><font color="#CCCCCC" size="2" face="Arial"><a href="http://www.dothackportal.com/infection/index.shtml">.hack//Infection</a></font></div></td>
</tr>
<tr>
<td height="19"><div align="right"><font color="#CCCCCC" size="2" face="Arial">.hack//Mutation</font></div></td>
</tr>
<tr>
<td height="19"><div align="right"><font color="#CCCCCC" size="2" face="Arial">.hack//Outbreak</font></div></td>
</tr>
<tr>
<td height="19"><div align="right"><font color="#CCCCCC" size="2" face="Arial">.hack//Quarantine</font></div></td>
</tr>
<tr>
<td height="19"><div align="right"><font color="#CCCCCC" size="2" face="Arial"><a href="http://www.dothackportal.com/gurebirth/index.shtml">.hack//G.U.
Rebirth </a></font></div></td>
</tr>
<tr>
<td height="19"><div align="right"><font color="#CCCCCC" size="2" face="Arial">.hack//G.U.
Reminise </font></div></td>
</tr>
<tr>
<td height="19"><div align="right"><font color="#CCCCCC" size="2" face="Arial">.hack//Redemption</font></div></td>
</tr>
</table>
</div>
<div align="left"><font color="#CCCCCC">
<script>
function toggle(){
var div1 = document.getElementById('div1')
if (div1.style.display == 'none') {
div1.style.display = 'block'
} else {
div1.style.display = 'none'
}
}
</script>
</font></div>
</div></td>

p.s. For those wondering, this is for a game website for .hack. Thanks!

[xgretsch]

Hard to know what you're doing wrong without an example of your multiple toggles, but here's some code based on yours that works (at least on mine!):

<div align="left" id='div1' style='display:none'>Contents of div1</div>
<div align="left" id='div2' style='display:none'>Contents of div2</div>
<div align="left" id='div3' style='display:none'>Contents of div3</div>
<button onclick="toggle(1)">Toggle div 1</button>
<button onclick="toggle(2)">Toggle div 2</button>
<button onclick="toggle(3)">Toggle div 3</button>
<script>
function toggle(x){
var divx = document.getElementById('div'+x)
if (divx.style.display == 'none') {
divx.style.display = 'block'
} else {
divx.style.display = 'none'
}
}
</script>