Hello everyone,

I'm using the following code to 'hide' or 'show' hidden content on a page. The javascript toggles the display of the content and changes the image from 'plus.gif' to 'minus.gif'. However, the script was written to work with a single item. With two or more 'hidden' divs (as I have below), there are multiple instances of the gif's (plus and minus) and the code will only change the first one.

Can the code (the javascript OR the html) be changed so that there can be multiple 'hidden' divs on a page and the appropriate gif changes?

Thanks in advance!

Code:
<script language="javascript">
imageX='plus';
function toggleDisplay(e){
element = document.getElementById(e).style;
 if (element.display=='none') {element.display='block';}
 else {element.display='none';}
 if (imageX=='plus') {document.getElementById('imagePM').src='minus.gif';imageX='minus';}
 else {document.getElementById('imagePM').src='plus.gif';imageX='plus';}
}
</script>
HTML Code:
<!-- hidden div #1 -->
<div><a title="Show Tables" href="javascript:toggleDisplay('hiddendiv1')"><img src="plus.gif" name="imagePM" width="12" height="12" border="0" id=imagePM /></a> title to show for hidden div #1 </div>
<div style="display:none; border: 1px solid #ccc; padding: 10px;" id="hiddendiv1">
  <p style="margin: 0; padding: 0;">content of hidden div #1</p>
</div>
<!-- hidden div #2 -->
<div><a title="Show Tables" href="javascript:toggleDisplay('hiddendiv2')"><img src="plus.gif" name="imagePM" width="12" height="12" border="0" id=imagePM /></a> title to show for hidden div #2 </div>
<div style="display:none; border: 1px solid #ccc; padding: 10px;" id="hiddendiv2">
  <p style="margin: 0; padding: 0;">content of hidden div #2</p>
</div>