Collapsing Table Rows

quissettdesigns posted this at 21:07 — 18th March 2005.

Joined: Mar 2005

Is there any way to Hide/Show a row in the table that will work in both NS and IE? I have one which I can get to work in IE, but not in NS. It does work in FireFox.

I am trying to hide one section of an application form and allow users to hide it or show it. Unfortunately I cannot seem to come up with a way compatible in IE and NS. Any ideas? I will post my code, but in a nutshell here are the snipets it have used.

Thanks
MD

function OnToggle(elt)
{if(elt.style.display == "none")
elt.style.display = ""
else
elt.style.display = "none"
}

CptAwesome posted this at 22:09 — 18th March 2005.

He has: 370 posts

Joined: Dec 2004

You could put a div in the and have it hide/show, I think that's more cross compatible.

You might also look up the innerHTML Javascript function.

dk01 posted this at 22:18 — 18th March 2005.

He has: 516 posts

Joined: Mar 2002

Here is some working code:

<?php
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\">
<head>
<title>An example of hiding and showing a row</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=ISO-8859-1\" />
&lt;script language=\"Javascript\" type=\"text/javascript\"&gt;
function Toggle(elt) {
    if(document.getElementById(elt).style.display == \"none\") {
        document.getElementById(elt).style.display = \"block\";
    } else {
        document.getElementById(elt).style.display = \"none\";
    }
}
&lt;/script&gt;

<style type=\"text/css\">
table {
    width:100%;
    border: 1px solid #ccc;
    }

table tr td, input {
    font-size: 8pt;
    font-family: Verdana, serif;
    }

.rows {
    display:block;
    }

#theTestRow {
    color:white;
    background: #c00;
    }
</style>
</head>

<body>
<table>
    <tr id=\"theControlRow\" class=\"rows\">
    <td><input type=\"button\" onclick=\"Toggle('theTestRow')\" value=\"Hide/Show\" /></td>
    </tr>
    
    <tr id=\"theTestRow\" class=\"rows\">
    <td>This is a test row.</td>
    </tr>
</table>
</body>
</html>
?>

This works in IE6 (although SP2 blocks some javascript), Firefox 1.0.1, NS 7.2. Some tips in the future:

Posting your entire code helps us ensure our advice is correct.
When you talk about browsers try to note what versions you are talking about.

I hope this code helps you!

-dk

quissettdesigns posted this at 21:10 — 21st March 2005.

They have: 11 posts

Joined: Mar 2005

Thanks for the reply.

Here is the code with which I am working on. Essentially I am trying to get the shaded RESUME section to show and hide by clicking on a button. I have been successful in some attempts, but nothing that works very well in NN. I have also worked on both layers and divs but still haven't found a good alternative. Any suggestions would be helpful. Sorry for all the extra code.

Thanks

dk01 posted this at 21:41 — 21st March 2005.

He has: 516 posts

Joined: Mar 2002

Can you post a live version instead of just code? The problem is that I don't have any of the images so it looks really odd.

-dk

quissettdesigns posted this at 16:24 — 22nd March 2005.

They have: 11 posts

Joined: Mar 2005

The only images should be in the header of the page. If this is a problem let me know and I could post a mockup, but this would require a little bit manipulating.

Thanks,

quissettdesigns posted this at 16:54 — 9th May 2005.

They have: 11 posts

Joined: Mar 2005

Thanks for the reply dk,
I updated the code and went in the direction of the togle instead. I set the visability to hidden for default and now it will show and hide in all but NN 4.78. I will probably just exclude NN 4.## from the code and default the visabilty to show.

Just wanted to let you know your code helped.

andy206uk posted this at 23:06 — 9th May 2005.

He has: 1,758 posts

Joined: Jul 2002

Don't even bother trying to write compatible code for old versions of Netscape, nobody uses it anymore! As long as your code works in Internet Explorer 5+, Mozilla/Firefox and Opera you've got 99.9% of the market covered and the other .1%

The newer versions of netscape use the mozilla rendering engine so anything tested and working in mozilla should work in the newer versions of Netscape.

Andy

quissettdesigns posted this at 19:01 — 18th May 2005.

They have: 11 posts

Joined: Mar 2005

I agree, I don't really pay much attention to the older versions anymore, but for this particular site, everything else works, albeit with a loss of some functions, but it does work. Therefore, for something small like this, why render the remainder of the application useless?

JeevesBond posted this at 12:28 — 19th May 2005.

He has: 3,956 posts

Joined: Jun 2002

Hmmm, you could just ensure that it's always visible in older NS, then you wouldn't lose any functionality. Is that not possible?