jQuery .toggle() not working with TRs in IE

Question

I am using jQuery\'s toggle() to show/hide table rows. It works fine in FireFox but does not work in IE 8.

.show()/.hide() work fine though

Answer 1

I have noticed that toggle may not work for iphone if you include jquery mobile. If you run toggle (.ready) before jquery mobile is loaded then its fine.

Answer 2

because you are having them click an <a>, you need the function to return false.

Answer 3

I fixed this problem by hiding children of the TR element.

toggleTr($(".toggletr"));

function toggleTr(el) {
    $(el).children('td').each(function() {
        $(this).toggle();
    });
}

This seems to be ok for FF3.5/FF3/IE8/IE7/IE6/Chrome/Safari.

Answer 4

I've experienced this same error on tr's in tables. I did some investigation using IE8's script debugging tool.

First I tried using toggle:

$(classname).toggle();

This works in FF but not IE8.

I then tried this:

if($(classname).is(":visible"))//IE8 always evaluates to true.
     $(classname).hide();
else
     $(classname).show();

When I debugged this code, jquery always thought it was visible. So it would close it but then it would never open it back.

I then changed it to this:

var elem = $(classname)[0];
if(elem.style.display == 'none')
     $(classname).show();
else
{
     $(classname).hide();               
}

That worked fine. jQuery's got a bug in it or maybe my html's a little screwy. Either way, this fixed my issue.

Answer 5

Looks like this has been fixed in JQuery 1.4.

Answer 6

Tables are an interesting piece of html, they don't follow normal rules as other elements.

basically tables display as tables, there are special rules for tables but this was not dealt with properly in older browsers because of the roller coaster of craziness that was the browser wars.

Essentially in older browsers tables display properties were minimal and the flow was left largely undocumented so instead of altering predefined values for the table/tr/td tag it is best to instead add and remove the following class and simply toggle the class itself on and off on the attribute of the table/tr/td.

.tableHide {
    display: none;
}

<table>
<tr><td> Visible content</td></tr>
<tr><td> Visible content</td> <td class="**tableHide**"> **Hidden Content**</td></tr>
</table>

The reason for this is so that it is a separate class being used to toggle the display therefore nothing on the table itself is being changed nor do any of the tables properties need to be altered, display and any related layout properties are preserved even if the browser doesn't make that easy behind the scenes.