Click on link, and a table is displayed below it

[kingkelly]

Im going to have 3 links beside each other. When i click on one link, a table appears underneath it. When you click on the second link, a different table replaces the other one. Its pretty much like replicating a tabbed interface.

I really just need to click on a link, and a chunk of HTML gets displayed below it. Can somebody help me please?

 

[LFI]

If you don't mind putting all your processing time up front, create all three tables and put them in individual DIV tags with their display properties set to hide them:

<a href='#' table='table1' onclick='showTable(this.table)'>Show table 1</a>
<div id='table1' style='visibility:hidden;display:none'>
<table ...>
...
</table>
</div>

Then have each link call the function that will show the table you want:

<script>
var currentTable;
function showTable(anchorTable)
{
 if(currentTable)
 {
  currentTable.style.visibility = 'hidden';
  currentTable.style.display = 'none';
 }//end if

 currentTable = eval(anchorTable);
 currentTable.style.visibility = 'visible';
 currentTable.style.display = 'inline';
}//end showTable(var)
</script>

This works for me in a small test on IE6.

'hope this helps.

--Dave

 

[kingkelly]

Sweeeeet, thats awesome! thanks a bunch dude