View Full Version : Row height growing when toggling display

05-15-2006, 01:41 PM

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

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

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,

05-15-2006, 10:22 PM
I suggest you read Hiding and Unhiding Table Rows (http://www.dynamicsitesolutions.com/javascript/hiding_and_unhiding_table_rows/).