When I click togglediv, commentdiv must be visible or hidden. The following code is running on Firefox but not 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");
}
});
});
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 perfectly for me in IE7/FF3. Note: I did have to reverse the order of statements 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 i.e. 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>
There is a function toggle in jquery that does exactly what you want without having to check for visibility:
$("#commentdiv").toggle("slow");
You're missing a closing }
Try
$(document).ready(function(){
$("#togglediv").click(function(){
if($("#commentdiv").is(":visible")){
$("#commentdiv").hide("slow"); $("#togglediv").text("show");
}
else{
$("#commentdiv").show("slow"); $("#togglediv").text("hide");
}
}
});
Something I noticed that was interesting, and I think it was touched on above by cletus, is that if you switch the order of the "show" line with the "text" line - it seems to start working. I have no explanation for this; it would be nice to know what is going on behind the scenes.
if(document.getElementById(ThisObj).style.display == 'none')
{
document.getElementById(ThisObj).style.display = 'block';
}
else
{
document.getElementById(ThisObj).style.display = 'none';
}
it works:)
