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 2 of 2
  1. #1
    New Coder
    Join Date
    May 2006
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Row height growing when toggling display

    Hi

    I have a function, which expands/collapses table. Structure of this table is like this:

    -table
    --tbody
    ---tr
    ----td img with onclick(toggleSubCategory(this)) attribute
    ----td TableTitle
    ---tr <- this is element which is hidden/displayed
    ----table
    -----tbody
    ------tr <- many rows
    -------td

    and that's my js function:

    function toggleSubCategory(me) {
    var category = new String(me.id).substr(6);
    table = document.getElementById("cat" + category); // that's the name of outer table (containing row which is being toggled)
    row = table.childNodes[0].childNodes[1]; // that's the row which contains inner table - I show/hide this row
    if(row.style.display == "none") {
    row.style.display = "block";
    me.src = "/ClientSite/template/images/minus.gif";
    }
    else {
    row.style.display = "none";
    me.src = "/ClientSite/template/images/plus.gif";
    }
    }

    And what's wrong that every time I toggle this row a new empty line appears.

    Thanks in advance for any help,
    Michael

  • #2
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I suggest you read Hiding and Unhiding Table Rows.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.


  •  

    Posting Permissions

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