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 had the same issue, but I found a nice workaround to make toggle/slideToggle work in all browsers.

Click
lorem ipsum .... text ....
  

and now the JS:

    jQuery("#myButton").click(function () {
  var currentDisplay = jQuery("#myDiv").css("display"); // save the current Display value
  jQuery(#myDiv).slideToggle("fast", function () { // lets do a nice slideToggle
    // this code will run AFTER the sildeToggle is done
    // so if slideToggle worked fine (in FF, chrome, ...) this will have no evect, since the value is already block or none
    // but in case IE 8 runs this script, it will set the css display to the current value
    if (currentDisplay == "none") {
      jQuery(#myDiv).css('display', 'block');
    }else {
      jQuery(#myDiv).css('display', 'none');
        }
    });
    return false;
});

The result is that slideToggle works fine in all Browsers, except for IE8, in which will look a weird (messed up slide), but it will still work.