Question

For some reason this code is working when i click on the #display div, instead of the #button div, why is it acting like this, it should be toggled when clicking on #button, not #display.. What am i doing wrong?

Here is the example code:

<script>

    $("#button").click( function(){ 

            $("#display").toggle(
                    function(){ alert('On') },
                    function(){ alert('Off') }
            );
     });

</script>

The HTML:

    <div id="button"></div>
    <div id="display"></div>

Here is an online example (working):
http://jsfiddle.net/MuMZV/

Answer 1

The values you were passing into your toggle function were incorrect. It’s expecting, optionally, a duration, easing and callback. Changing the code to:

$("#button1").click( function(){ 
   $("#display").toggle();
});

Causes clicks to your button1 div to toggle the display of your display div. And this:

$("#button1").click( function(){ 
   $("#display").toggle(2000, function() { alert("toggled"); });
});

Causes the hiding/slowing to slow to two seconds, with an alert popping up when finished.

And if you want to display true or false, based on whether the toggled element is visible, this is what you want:

$("#button1").click( function(){ 
   $("#display").toggle(1000, 
       function() { alert($(this).is(":visible")); });
});