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.

slideToggle() does not work in IE either - it shows for a split second then disappears again. Works fine in FireFox.

My HTML looks similar to this

<a id="readOnlyRowsToggle">Click</a>  
<table>  
  <tr><td>row</td></tr>  
  <tr><td>row</td></tr>  
  <tr class="readOnlyRow"><td>row</td></tr>  
  <tr class="readOnlyRow"><td>row</td></tr>  
  <tr class="readOnlyRow"><td>row</td></tr>  
</table>

JavaScript

$(document).ready(function() {  
    $(".readOnlyRow").hide();  
    $("#readOnlyRowsToggle").click(function() {  
        $(".readOnlyRow").toggle();  
    });  
});  

Answer 1

I found that while this does not work in IE8

$('.tableRowToToggle').toggle();

but this does work:

$('.tableRowToToggle').each(function(){this.toggle()});

Got the idea from the link jAST posted here before

Answer 2

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 3

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 4

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

Answer 5

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

There is a jQuery bug that IE8 causes everything to evaluate to true. Try above

Answer 6

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.