Menu
I am trying to implement a code that allows me to click on a table row and show the contents of the second row.
I am using 3 tables and each time I click on one table I want the script to show the contents of that table and hide the contents of all the other.
The process is as the following
1 – Click on table 1
2 – Show contents of Table 1 and Hide Table 2 and 3 automatically
3 – Clicking on table 1 again will hide its contents (this part is working)
4 – When clicking on table 2 or 3 while table one is open, I want the script to close table 1 automatically (this part is not working and if anyone can help me on that I would really appreciate it)
Right now, show contents of a table is working, whenever I click on table one it will show the contents of that table, and if I click on it again while its showing its contents it will close that table, this is fine. But I want to be able to close the contents of a table not just by clicking on it but also by clicking on another.
I am using the code below
[code=html]
<script type=”text/javascript”>
var smooth_timer;
function smoothHeight(id, curH, targetH, stepH, mode) {
diff = targetH – curH;
if (diff != 0) {
newH = (diff > 0) ? curH + stepH : curH – stepH;
((document.getElementById) ? document.getElementById(id) : eval(“document.all[‘” + id + “‘]”)).style.height = newH + “px”;
if (smooth_timer) window.clearTimeout(smooth_timer);
smooth_timer = window.setTimeout( “smoothHeight(‘” + id + “‘,” + newH + “,” + targetH + “,” + stepH + “,'” + mode + “‘)”, 20 );
}
else if (mode != “o”) ((document.getElementById) ? document.getElementById(mode) : eval(“document.all[‘” + mode + “‘]”)).style.display=”none”;
}
/* ########################################################### */
function rowOver(i, nColor) {
if (!nColor) nColor = “#ECECD9”;
var nameObj = (document.getElementById) ? document.getElementById(‘name’ + i) : eval(“document.all[‘name” + i + “‘]”);
if (nameObj != null) nameObj.style.background=nColor;
}
function rowOut(i, nColor) {
var trObj = (document.getElementById) ? document.getElementById(‘ihtr’ + i) : eval(“document.all[‘ihtr” + i + “‘]”);
var nameObj = (document.getElementById) ? document.getElementById(‘name’ + i) : eval(“document.all[‘name” + i + “‘]”);
if (trObj == null || trObj.style.display==”none”) nameObj.style.background=nColor;
}
function servOC(i1, i2, i3) {
var trObj = (document.getElementById) ? document.getElementById(‘ihtr’ + i1) : eval(“document.all[‘ihtr” + i1 + “‘]”);
var ifObj = (document.getElementById) ? document.getElementById(‘ihif’ + i1) : eval(“document.all[‘ihif” + i1 + “‘]”);
if (trObj.style.display==”none”) {
trObj.style.display=””;
smoothHeight(‘ihif’ + i1, 0, 210, 42, ‘o’);
smoothHeight(‘ihif’ + i2, 210, 0, 42, ‘ihtr’ + i2);
smoothHeight(‘ihif’ + i3, 210, 0, 42, ‘ihtr’ + i3);
} else {
smoothHeight(‘ihif’ + i1, 210, 0, 42, ‘ihtr’ + i1);
}
}
/* ########################################################### */
</script>
<table border=”1″ cellpadding=”3″ cellspacing=”0″ width=”621″>
<tr onclick=”servOC(1,2,3)”>
<td height=”67″ valign=”top” id=”name1″ border=”1″>Option 1 </td>
</tr>
<tr style=”display:none” id=”ihtr1″>
<td colspan=”9″><table width=”100%” cellspacing=”0″ cellpadding=”0″ border=”0″>
<tr>
<td>
<div width=”100%” id=”ihif1″>
Content 1
</div>
</td>
</tr>
</table></td>
</tr>
<tr>
<td></td>
</tr>
</table>
<table border=”1″ cellpadding=”3″ cellspacing=”1″ width=”621″>
<tr onclick=”servOC(2,1,3)”>
<td height=”65″ valign=”top” id=”name2″ border=”1″>Option 2 </td>
</tr>
<tr style=”display:none” id=”ihtr2″>
<td colspan=”9″><table width=”100%” cellspacing=”0″ cellpadding=”0″ border=”0″>
<tr>
<td>
<div width=”100%” id=”ihif2″>
Content 2
</div>
</td>
</tr>
</table></td>
</tr>
<tr>
<td></td>
</tr>
</table>
<table border=”1″ cellpadding=”3″ cellspacing=”1″ width=”621″>
<tr onclick=”servOC(3,1,2)”>
<td height=”56″ valign=”top” id=”name3″ border=”1″>Option 3</td>
</tr>
<tr style=”display:none” id=”ihtr3″>
<td colspan=”9″><table width=”100%” cellspacing=”0″ cellpadding=”0″ border=”0″>
<tr>
<td>
<div width=”100%” id=”ihif3″>
Content 3
</div>
</td>
</tr>
</table></td>
</tr>
<tr>
<td></td>
</tr>
</table>