Show/Hide data in table - New To Web Development forum at WebmasterWorld - WebmasterWorld

Forum Moderators: mack

Message Too Old, No Replies

Show/Hide data in table

edwinxp

11:05 am on Nov 25, 2003 (gmt 0)

10+ Year Member

Hi,
I am new to web desiging and need help.I am trying to display a table in which alternate rows should get displayed only on click in the previous row.(basically want to make it behave like a collapsible tree).
It works fine to some extent in IE,but not in netscape.But,in IE, on trying to hide the row that was made visible,though the text disappears,the width of the row remains the same.Sending across the sample code i wrote...
<HTML>
<HEAD></HEAD>
<BODY>
<SCRIPT language=JavaScript>
ns4= (document.layers)?true:false;
ie4= (document.all)?true:false;
function showhide(c)
{
if(ie4)
{
if(document.all[c].style.visibility=="hidden")
{
document.all[c].style.visibility="visible";
document.all[c].style.display="block";
}
else
{
document.all[c].style.visibility="hidden";
}
}
if(ns4)
{
if(document.layers[c].visibility=="hide")
{
document.layers[c].visibility="show";
}
else
{
document.layers[c].visibility="hide";
}
}
}

</SCRIPT>
<TABLE>
<TR><TD><DIV onclick="showhide('O')">Show One</DIV></TD></TR>
<TR><TD><DIV id=O style="DISPLAY: none; VISIBILITY: hidden">ONE</DIV></TD></TR>
<TR><TD><DIV onclick="showhide('T')">Show Two</DIV></TD></TR>
<TR><TD><DIV id=T style="DISPLAY: none; VISIBILITY: hidden">TWO</DIV></TD></TR>
</TABLE>
</BODY>
</HTML>

Is there another way of doing this?Can anyone please help me out of this.I need it to be working in both browsers.
Thank you

Alternative Future

11:16 am on Nov 25, 2003 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Hi edwinxp and Welcome to WebmasterWorld,

function show(c) {
if (document.getElementById && document.getElementById(c)!= null)
node = document.getElementById(c).style.display='';
else if (document.layers && document.layers[c]!= null)
document.layers[c].display = '';
else if (document.all)
document.all[c].style.display = '';
}
function hide(c) {
if (document.getElementById && document.getElementById(c)!= null)
node = document.getElementById(c).style.display='none';
else if (document.layers && document.layers[c]!= null)
document.layers[c].display = 'none';
else if (document.all)
document.all[c].style.display = 'none';
}

This should work for both IE and Netscape.

HTH,

-gs

edwinxp

11:55 am on Nov 25, 2003 (gmt 0)

10+ Year Member

Hi,
Thanks alot for the code.It works very much the way i wanted in IE.But alas,its still not working in Netscape.
In netscape i am not able to trigger the onclick event of <DIV> tag.....
Please help.
Thank You.

Alternative Future

12:52 pm on Nov 25, 2003 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

What version of Netscape are you using I have tested it on 7.02 and all works fine!

I have removed the VISIBILITY: hidden from both of the DIV tags though. See below:

<HTML>
<HEAD></HEAD>
<BODY>
<SCRIPT language=JavaScript>
function show(c) {
if (document.getElementById && document.getElementById(c)!= null)
node = document.getElementById(c).style.display='';
else if (document.layers && document.layers[c]!= null)
document.layers[c].display = '';
else if (document.all)
document.all[c].style.display = '';
}
function hide(c) {
if (document.getElementById && document.getElementById(c)!= null)
node = document.getElementById(c).style.display='none';
else if (document.layers && document.layers[c]!= null)
document.layers[c].display = 'none';
else if (document.all)
document.all[c].style.display = 'none';
}
</SCRIPT>
<TABLE>
<TR><TD><DIV onclick="show('O')">Show One</DIV></TD></TR>
<TR><TD><DIV id=O style="DISPLAY: none;">ONE</DIV></TD></TR>
<TR><TD><DIV onclick="show('T')">Show Two</DIV></TD></TR>
<TR><TD><DIV id=T style="DISPLAY: none;">TWO</DIV></TD></TR>
</TABLE>
</BODY>
</HTML>

-gs

edwinxp

4:42 am on Nov 26, 2003 (gmt 0)

10+ Year Member

Hi,
Thanks again.The code works fine in netscape 7.
I had initially tried in Netscape 4.7.Is there a way to get it working in netscape 4.7?
Regards,
edwin