...

View Full Version : Row show/hide script



faulker
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...

Hyelp!

<SCRIPT LANGUAGE="JavaScript">
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 {
alert(title);
document.getElementById(tbodyid).style.display = "none";
document.getElementById(ClickIcon).innerHTML = "<i>" + title + " (Click To Expand)</i>";
}}
</SCRIPT>

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

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

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

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

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

ninnypants
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

faulker
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. :)

faulker
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. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum