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();
});
});
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.
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');
});
});
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With