Expandable Javascript Text Block Problem

[nova706]

I am having trouble with a piece of javascript code that expands blocks of text. For example, when you click the title, the text under it will expand. I am fairly new to javascript but it looks like the code bassically re-writes the link in the html so that when you press the title again, it will collapse the text.

Here is the javascript code...

function expand(ID,name)
  {  
    document.getElementById('item'+ID).style.display = 'block';
    document.getElementById('expander'+ID).innerHTML =
'<a href="javascript:collapse('+ID+',\''+name+'\')" title="Collapse"><img alt="less" src="images/arrow_back.gif" width="20" height="10" class="no_border" /> <span id="expander1" class="style_heading3">'+name+'</span><br /></a>';
  }
  function collapse(ID,name)
  {
    document.getElementById('item'+ID).style.display = 'none';
    document.getElementById('expander'+ID).innerHTML =
'<a href="javascript:expand('+ID+',\''+name+'\')" title="Expand"><img alt="more" src="images/arrow.gif" width="20" height="10" class="no_border" /> <span id="expander1" class="style_heading3">'+name+'</span><br /></a>';
  }

Here is the HTML code...

<div id="expander1" class="expander" style="display: inline">
   <a href="javascript:expand(1, 'TITLE')" title="Expand">
   <img alt="more" src="images/arrow.gif" width="20" height="10" class="no_border" />
   <span class="style_heading3">TITLE</span><br />
   </a>
</div>
<div id="item1" style="display: none">
   Expanded text goes here
</div>

The problem that I am having is that when you open the page in Mozilla Firefox or Safari, the boxes do not expand and collapse properly after you have expanded and collapsed it once. The code works perfectly fine in IE7. I am really stuck and cannot figure out why the java code would work fine in IE and not Firefox/Safari.

If anyone has any advice on how to accomplish this or how to tweak my current code to work on other browsers it would be very appreciated.

[peter_budo]

I used something like this 2-3 years ago on one of my school assigmnets. Maybe it will help you...

Script in the head of html

<script type="text/javascript"><!--function to hide/show submenu options-->
(document.getElementById ? DOMCapable = true : DOMCapable = false);

function show(menuName)
{
 	if (DOMCapable)
 	{

if(document.getElementById("menu1choices").style.visibility=="hidden")
 		{

document.getElementById("menu1choices").style.display="block";

document.getElementById("menu1choices").style.visibility="visible";
 		}
 		else
 		{

document.getElementById("menu1choices").style.display="none";

document.getElementById("menu1choices").style.visibility="hidden";
 		}

 	 }
}
function hide(menuName)<!--Function to hide submenu if any other option from main menu selected-->
{
 	if (DOMCapable)
 	{

document.getElementById("menu1choices").style.display="none";

document.getElementById("menu1choices").style.visibility="hidden";
 	 }
}
</script>

Inside body of html

<div id="menu1" onClick="show('menu1choices');">
<p class="black_link" style="cursor: pointer;">Quiz</p></div>
<div id="menu1choices" style="display: block; visibility: visible;">
<table border="0">
<tbody><tr>
 	<td><a href="quiz1.html" 
target="main" class="black_smaller">Quiz 1</a></td>
</tr>
<tr>
 	<td><a href="test.html" 
target="main" class="black_smaller">Quiz2</a></td>
</tr>
</tbody>
</table>
</div>

<script type="text/javascript">
 	if (DOMCapable)
 	{
 	 show("menu1");
 	}
</script>