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

http://groups.google.com/group/jquery-en/browse_thread/thread/65f58538930f00c2

Answer 2

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

Answer 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.

Answer 4

I've noticed this as well. Likely you'll have to toggle a class on each td instead. Haven't tried this solution yet, so let me know!

For others - this is specific to IE8, not 6 or 7.

EDIT

Clearly you didn't try this as evidenced by the -1, as I just did with fine results (in my situation).

CSS

tr.hideme td { display: none }

JS

$("#view-advanced").click(function() {
    $("tr.hideme td").toggle();
    return false;
});

Answer 5

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 6

$(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 7

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

:not(:hidden)

instead of

:visible

then act accordingly . .

Answer 8

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 9

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 10

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');  
  });  
});

Answer 11

Looks like this has been fixed in JQuery 1.4.

Answer 12

blubb

i had the same issue, but i found a nice work around to make toggle/slidetoggle work in all browsers.

<a id="myButton">Click</a>
<div id="myDiv" display="none">lorem ipsum .... text ....</div>  

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 currect 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. Exept in IE8, it will look a weird (fucked up Slide), but it will still work.

greetings <°(((-<