Jquery .toggle() Not Working With Trs In Ie

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. slideToggle() does not work in IE either

Solution 1:

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.

Solution 2:

Upgrading to jQuery 1.4 fixes this, whilst I'm at it though, the only "fix" on this page which worked for me was Dough boy's answer:

$(document).ready(function() {  
  $(".readOnlyRow").hide();  
  $("#readOnlyRowsToggle").click(function() {  
    $(".readOnlyRow").toggle($('.readOnlyRow').css('display') == 'none');  
  });  
});

Solution 3:

Remove the period from your <tr class=".readOnlyRow"><td>row</td></tr>. The syntax for jQuery class selecting is to prepend it with a period, but you don't need it in your HTML code.

Solution 4:

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

toggleTr($(".toggletr"));

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

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

Solution 5:

Just encountered this myself -- the easiest solution I've found is to check for:

:not(:hidden)

instead of

:visible

then act accordingly . .