Geek Answers Handbook

JQuery hide show div not working in Internet Explorer

When I click togglediv , commentdiv should be visible or hidden. The following code works in Firefox, but not in Internet Explorer:

 $(document).ready(function(){ $("#togglediv").click(function(){ if( $("#commentdiv").is(":visible") ) { $("#commentdiv").hide("slow"); $("#togglediv").text("show"); } else { $("#commentdiv").show("slow"); $("#togglediv").text("hide"); } }); });
+4
source share
5 answers

I would try:

 $(document).ready(function() { $("#togglediv").click(function() { // note: do this first because the :hidden test fails if you // do it after triggering a slow animation $("#togglediv").text($("#commentdiv").is(":hidden") ? "Hide" : "Sgiw"); $("#commentdiv").toggle('slow'); }); });

Edit: In response to your comment, this example works fine for me in IE7 / FF3. Note. I had to reverse the order of the expressions when using slow effects. Interesting!

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Test</title> <style type="text/css"> #togglediv { padding: 5px; background-color: yellow; } #commentdiv { padding: 5px; background-color: #CCC; height: 100px; } </style> </head> <body> <div id="togglediv">Hide</div> <div id="commentdiv">thanks for answer. but i have tried this code, it was okay. i want to use toggle("slow") effect. this effect is runing firefox, but not ie is it a bug?</div> <script type="text/javascript" src="jquery-1.3.1.js"></script> <script type="text/javascript"> $(function() { $("#togglediv").click(function() { $("#togglediv").text($("#commentdiv").is(":hidden") ? "Hide" : "Show"); $("#commentdiv").toggle('slow'); }); }); </script> </body> </html>
+5
source

There is a toggle function in jquery that does exactly what you want without checking visibility:

 $("#commentdiv").toggle("slow");
+6
source

You don't have enough closure}

Try

  $(document).ready(function(){ $("#togglediv").click(function(){ if($("#commentdiv").is(":visible")){ $("#commentdiv").hide("slow"); $("#togglediv").text("show"); } else{ $("#commentdiv").show("slow"); $("#togglediv").text("hide"); } } });
+2
source

Something I noticed was interesting, and I think that it was touched above cletus, so that if you switch the order of the line “show” with the line “text” - it seems to start working. I have no explanation for this; it would be nice to know what was going on behind the scenes.

+1
source 
 if(document.getElementById(ThisObj).style.display == 'none') { document.getElementById(ThisObj).style.display = 'block'; } else { document.getElementById(ThisObj).style.display = 'none'; }

it works:)

+1
source

More articles:


All Articles