Expand/Collapse problems.

[TJMAudio]

My Website: http://www.raidaholics.com/beta/index.php?home

 

If you click the Arrows image on the table labeled "Karazhan" a few times you will notice the problem... it leaves the old table, and builds a new one, constantly lowering the text more and more down the page.

 

How do I fix this?

 

Page source code is:

 

<div class="topBar"><a href="index.php?m=home">Home</a> // <a href="index.php?m=login">Log in</a> // <a href="index.php?m=register">Register</a></div>

<table class="logo">
  <tr>
    <td height="60" width="275">
    	<a href="index.php?m=home"><img src="images/logo.gif" alt="Raidaholics.com" border="0" /></a>
      <center><a href="index.php?m=submitinfo">Submit a guide and get paid!</a></center>
    </td>
  </tr>
</table>

<table class="topAd">
  <tr>
    <td height="60" width="460">
    	<a href="#"><img class="adBorder" src="images/adbanners/joana_468_60_h.gif" alt="Space For Rent!" border="0" /></a>
    </td>
  </tr>
</table>
<div class="sideBar">
  <table border="0" cellpadding="6" cellspacing="1" class="tborder" width="175">
    <thead>
      <tr>
        <td class="tcat" colspan="0">
          <a href="#first" onclick="shoh('first')" style="float:right">
          <img alt="" border="0" name="imgfirst" src="images/collapse_tcat.gif" />
          </a>
          <span class="smallfont"><strong>» Karazhan</strong></span>
        </td>
      </tr>
    </thead>
    <tbody id="first">
      <tr>
        <td class="alt1">
        	<ul>
            <li>Attument</li>
            <li>Moroes</li>
            <li>Maiden</li>
            <li>Big Bad Wolf</li>
            <li>Romulo & Juliannce</li>
            <li>Wizard of Oz</li>
            <li>The Curator</li>
            <li>Shade of Aran</li>
            <li>Prince Malchezaar</li>
          </ul>
        </td>
      </tr>	
    </tbody>
  </table>
</div>

 

Javascript for collapse/expand is:

imgout=new Image(15,15);
imgin=new Image(15,15);

/////////////////BEGIN USER EDITABLE///////////////////////////////
imgout.src="images/collapse_tcat.gif";
imgin.src="images/collapse_tcat_collapsed.gif";
///////////////END USER EDITABLE///////////////////////////////////

//this switches expand collapse icons
function filter(imagename,objectsrc){
if (document.images){
	document.images[imagename].src=eval(objectsrc+".src");
}
}

//show OR hide funtion depends on if element is shown or hidden
function shoh(id) { 

if (document.getElementById) { // DOM3 = IE5, NS6
	if (document.getElementById(id).style.display == "none"){
		document.getElementById(id).style.display = 'block';
		filter(("img"+id),'imgin');			
	} else {
		filter(("img"+id),'imgout');
		document.getElementById(id).style.display = 'none';			
	}	
} else { 
	if (document.layers) {	
		if (document.id.display == "none"){
			document.id.display = 'block';
			filter(("img"+id),'imgin');
		} else {
			filter(("img"+id),'imgout');	
			document.id.display = 'none';
		}
	} else {
		if (document.all.id.style.visibility == "none"){
			document.all.id.style.display = 'block';
		} else {
			filter(("img"+id),'imgout');
			document.all.id.style.display = 'none';
		}
	}
}
}

 

Also, how would I make it so they all start collapsed instead of expanded?

[fenway]

Broken link?