jquery toggle event within toggle event creates unexpected behavior
<pre><code>$('button').toggle({
    function(e){
        //turn on effects for all elements clicked
        $('*').toggle(
            function(e){
                //some nice effects when you click on elements
            },
            function(e){
                //nice effects turned off when you click again.
            }
        );
    },

    function(e){
        // turn off all effects. aka unbind all click event
    });
});
</code></pre>

<p>It doesn't quite behave the way i expected. I wanted to basically, on clicking the button, that effects are turned on when you click an element. Its turned off when you click that element again.  Click the button and all effects are disabled.</p>

<p>However, what i end up with is:</p>

<ul>
<li>click the button</li>
<li>effects are turned on when i click an element</li>
<li>effects do not turn off when i click it again.</li>
<li>effects turn off when i click once more.</li>
</ul>

<p>also</p>

<ul>
<li>click the button.</li>
<li>effects turned on.</li>
<li>click button again</li>
<li>effects doesn't turn off.</li>
<li>click button again</li>
<li>effects turn off.</li>
</ul>

<p>why does it do this ??</p>
