View Full Version : Row show/hide script

08-14-2008, 03:50 PM
Ok, so I've been using a script posted by tcadieux to show and hide rows from a table for a few days now. Worked great. I then modified it slightly, changing the + and - to actual header names for the table. Worked wonderfully...until I tested in IE. Doesn't work at all there. In firefox, the below code lets the table expand when I click the header row. In IE, the header row shows the correct cursor, but then you click it, nothing happens. No script errors pop up. I tested the variables (ie, "title") and they come through with the correct names. I went back and tested the original script in IE and it works fine, so I know it's something stupid that I did...


function expandcontract(tbodyid,ClickIcon,title) {
if (document.getElementById(ClickIcon).innerHTML == "<i>" + title + " (Click To Expand)</i>"){
document.getElementById(tbodyid).style.display = "";
document.getElementById(ClickIcon).innerHTML = "<i>" + title + " (Click To Close)</i>";
} else {
document.getElementById(tbodyid).style.display = "none";
document.getElementById(ClickIcon).innerHTML = "<i>" + title + " (Click To Expand)</i>";

<table align="center" border="1" cellspacing="0" width="95%" >
<td align="center" colspan="4" onclick="expandcontract('Row4','ClickIcon4','Test')" id="ClickIcon4" style="cursor: pointer; cursor: hand;"><i>Test (Click To Expand)</i></td>
<tbody id="Row4" style="display:none">
(...more rows here that are hidden...)

08-14-2008, 04:16 PM
Change this:

document.getElementById(tbodyid).style.display = "";
to this:

document.getElementById(tbodyid).style.display = "block";

08-14-2008, 04:26 PM
No luck. Same results.

08-14-2008, 04:45 PM
Maybe this

expandcontract(tbodyid,ClickIcon,title) {
curr = document.getElementById(tbodyid).style.display;
document.getElementById(tbodyid).style.dispaly = (curr == 'none'?'block':'none');
document.getElementById(ClickIcon).innerHTML = (document.getElementById(ClickIcon).innerHTML == title+"(click to expand)"? title+"(click to close)": title+"(click to expand)");

I believe this will work It just takes the Id and checks weather the element is hidden or showing and changes it to the opposite. it does the same for the title

08-14-2008, 04:50 PM
Now the title changes...the rows don't appear though. Progress perhaps? Lol.

This is why I'm losing my hair. :)

08-14-2008, 05:44 PM
Nevermind, it works! Line 3 of your version had dispaly instead of display. I found that, fixed it, and the code works. You're my hero. :)