Post by Tuck on Oct 18, 2010 16:51:51 GMT -5
<style type="text/css">
<!--
.highlight { background-color: #EFFFDE;
}
-->
</style>
<table width="92%" cellpadding="4" cellspacing="1" align="center" class="bordercolor">
<tr>
<td class="titlebg" width="100%" colspan="4" height="25" align="center">
<font size=2><b>Table Title</B></font>
</td>
</tr>
<tr>
<td width="25%" align="center" javascript:void(0) onClick='document.getElementById("maincon").innerHTML = document.getElementById("IDA").innerHTML' style="cursor: pointer" class="windowbg2" onMouseOver="this.className='highlight'" onMouseOut="this.className='windowbg2'">
Content 1
</td>
<td width="25%" align="center" javascript:void(0) onClick='document.getElementById("maincon").innerHTML = document.getElementById("IDB").innerHTML' style="cursor: pointer" class="windowbg2" onMouseOver="this.className='highlight'" onMouseOut="this.className='windowbg2'">
Content 2
</td>
<td width="25%" align="center" javascript:void(0) onClick='document.getElementById("maincon").innerHTML = document.getElementById("IDC").innerHTML' style="cursor: pointer" class="windowbg2" onMouseOver="this.className='highlight'" onMouseOut="this.className='windowbg2'">
Content 3
</td>
<td width="25%" align="center" javascript:void(0) onClick='document.getElementById("maincon").innerHTML = document.getElementById("IDE").innerHTML' style="cursor: pointer" class="windowbg2" onMouseOver="this.className='highlight'" onMouseOut="this.className='windowbg2'">
Content 4
</td>
</tr>
<tr>
<td class="windowbg" width="100%" colspan="4" align="center">
<div id="maincon">
Click On Titles To Navigate
</div>
<div id="IDA" style="display: none;">
Content 1
</div>
<div id="IDB" style="display: none;">
Content 2
</div>
<div id="IDC" style="display: none;">
Content 3
</div>
<div id="IDE" style="display: none;">
Content 4
</div>
</td>
</tr>
</table>
<script type="text/Javascript">
<!--
function hideshow(id)
{
if(document.getElementById(id).style.display==""){
document.getElementById(id).style.display="none";
} else {
document.getElementById(id).style.display="";
}
}
//-->
</script>
<!--
.highlight { background-color: #EFFFDE;
}
-->
</style>
<table width="92%" cellpadding="4" cellspacing="1" align="center" class="bordercolor">
<tr>
<td class="titlebg" width="100%" colspan="4" height="25" align="center">
<font size=2><b>Table Title</B></font>
</td>
</tr>
<tr>
<td width="25%" align="center" javascript:void(0) onClick='document.getElementById("maincon").innerHTML = document.getElementById("IDA").innerHTML' style="cursor: pointer" class="windowbg2" onMouseOver="this.className='highlight'" onMouseOut="this.className='windowbg2'">
Content 1
</td>
<td width="25%" align="center" javascript:void(0) onClick='document.getElementById("maincon").innerHTML = document.getElementById("IDB").innerHTML' style="cursor: pointer" class="windowbg2" onMouseOver="this.className='highlight'" onMouseOut="this.className='windowbg2'">
Content 2
</td>
<td width="25%" align="center" javascript:void(0) onClick='document.getElementById("maincon").innerHTML = document.getElementById("IDC").innerHTML' style="cursor: pointer" class="windowbg2" onMouseOver="this.className='highlight'" onMouseOut="this.className='windowbg2'">
Content 3
</td>
<td width="25%" align="center" javascript:void(0) onClick='document.getElementById("maincon").innerHTML = document.getElementById("IDE").innerHTML' style="cursor: pointer" class="windowbg2" onMouseOver="this.className='highlight'" onMouseOut="this.className='windowbg2'">
Content 4
</td>
</tr>
<tr>
<td class="windowbg" width="100%" colspan="4" align="center">
<div id="maincon">
Click On Titles To Navigate
</div>
<div id="IDA" style="display: none;">
Content 1
</div>
<div id="IDB" style="display: none;">
Content 2
</div>
<div id="IDC" style="display: none;">
Content 3
</div>
<div id="IDE" style="display: none;">
Content 4
</div>
</td>
</tr>
</table>
<script type="text/Javascript">
<!--
function hideshow(id)
{
if(document.getElementById(id).style.display==""){
document.getElementById(id).style.display="none";
} else {
document.getElementById(id).style.display="";
}
}
//-->
</script>