[SOLVED] Hiding a TR

[adam84]

I have a table with three different links, once a link is clicked I want to show the corresponding row that was hidden initially. So if I click the 'Row 1' link, the new row 'Row 1 Click' becomes visible while the other two hidden rows stay hidden. This is where my problem is, if I were to click on the 'Row 2' link now, the 'Row 2 Click' row now appears, and the 'Row 1 Click' row disappears. But for some reason there seems to be an empty row or a line break where the 'Row 1 Click' row was (its now hidden). If I were to click row 1 again, then click row 2 again, there would now be 2 empty rows or line breaks under the 'Row 1' link.

 

Any idea? I hope I was able to describe this good enough. Thanks

 

 

HTML Code

<TABLE>
<TR><TD><A HREF=javascript:void(0); ONCLICK=show(1);>Row 1</A><TD></TR>
<TR NAME=r1 ID=r1 STYLE=display:none;><TD>Row 1 Clicked<TD></TR>

<TR><TD><A HREF=javascript:void(0); ONCLICK=show(2);>Row 2</A><TD></TR>
<TR NAME=r2 ID=r2 STYLE=display:none;><TD>Row 2 Clicked<TD></TR>

<TR><TD><A HREF=javascript:void(0); ONCLICK=show(3);>Row 3</A><TD></TR>
<TR NAME=r3 ID=r3 STYLE=display:none;><TD>Row 3 Clicked<TD></TR>
</TABLE>

 

Javascript Code

function show( i ){

if( i == 1){
document.getGetElementById('r1').style.display = 'block';
document.getGetElementById('r2').style.display = 'none';
document.getGetElementById('r3').style.display = 'none';
}else if( i == 2){
document.getGetElementById('r2').style.display = 'block';
document.getGetElementById('r1').style.display = 'none';
document.getGetElementById('r3').style.display = 'none';
}else if( i == 3){
document.getGetElementById('r3').style.display = 'block';
document.getGetElementById('r1').style.display = 'none';
document.getGetElementById('r2').style.display = 'none';
}

}//end function

[rhodesa]

Table rows (normally) have a display property of 'table-row', not block, so use that instead.

-OR-

Even better, just set the display to an empty string, and it will go back to it's default display property...like so:

if( i == 1){
document.getElementById('r1').style.display = '';
document.getElementById('r2').style.display = 'none';
document.getElementById('r3').style.display = 'none';
}else if( i == 2){
document.getElementById('r2').style.display = '';
document.getElementById('r1').style.display = 'none';
document.getElementById('r3').style.display = 'none';
}else if( i == 3){
document.getElementById('r3').style.display = '';
document.getElementById('r1').style.display = 'none';
document.getElementById('r2').style.display = 'none';
}