Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Row show/hide script

    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>

  • #2
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    Change this:
    Code:
    document.getElementById(tbodyid).style.display = "";
    to this:
    Code:
    document.getElementById(tbodyid).style.display = "block";

  • #3
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    No luck. Same results.

  • #4
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    Maybe this
    Code:
    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

  • Users who have thanked ninnypants for this post:

    faulker (08-14-2008)

  • #5
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Now the title changes...the rows don't appear though. Progress perhaps? Lol.

    This is why I'm losing my hair.

  • #6
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •