Don't know where to put ".stop()" in my jQuery script
<p>I'm updating my client's web gallery with some jQuery effects. I already made some successful changes but now I have a problem with my final script. Everything is working fine but when you start with fast clicking, the animation breaks the regular pattern and everything is a mess. I'm aware that I need to use the stop() function but I simply cannot make it work 100% as it should work.</p>

<pre><code>$(function () { 
    $(".gallery_view_switch").toggle(function () {

        $(this).html('Switching ...');
        $(".sidebar").slideToggle('slow', function () {
            $(".single_page").animate({width: 870}, 700),
            $('img.gallery').css('margin-left', '5px'), 
            $('#top').css('margin-right', '-290px'), 
            $('.gallery_view_switch').html('Show gallery navigation');   
        });

    },function () {

        $(this).html('Switching ...');
        $('img.gallery').css('margin-left', '12px'),
        $(".single_page").animate({width: 550}, 700, function () {
            $('#top').css('margin-right', '30px'), 
            $(".sidebar").slideToggle('slow'),
            $('.gallery_view_switch').html('Hide gallery navigation');
        });
    });
})
</code></pre>

<p>So, we have an "on-click" action here, sidebar with the gallery navigation goes up and the content gets additional size and new CSS properties for the images so the gallery now has more wider view. </p>

<p>On second click, the content gets the original size and properties and sidebar toggles back down to the original position.</p>

<p>What I am trying to do here is to stop the animation queue for the additional clicks and not to allow new animations to occur before everything is in place and ready for it.</p>

<p>Thanks! </p>

<p><strong>EDIT 2:</strong></p>

<pre><code>   $(function () { 

    var isExpanding = false;

    $(".gallery_view_switch").toggle(function () {

        if(!isExpanding) {           

            $(this).html('Switching ...');

            $(".sidebar").slideToggle('slow', function () {

                isExpanding = true;

                $(".single_page").animate({
                    width: 870
                }, 700),
                $('img.gallery').css('margin-left', '5px'), 
                $('#top').css('margin-right', '-290px'), 
                $('.gallery_view_switch').html('Show gallery navigation'); 

                isExpanding = false;

            });
        }
    },function () {
        if(!isExpanding) {

            $(this).html('Switching ...');
            $('img.gallery').css('margin-left', '12px'),

            $(".single_page").animate({
                width: 550
            }, 700, function () {

                isExpanding = true;


                $('#top').css('margin-right', '30px'), 
                $(".sidebar").stop().slideToggle('slow'),
                $('.gallery_view_switch').html('Hide gallery navigation');

                isExpanding = false;

            });
        }
    });

})
</code></pre>

<p>And another edit, still not working... I really don't understand what exactly do I have to change here to make it work? I tried with so many true/false combinations, no success, it is working as it worked before, with overlapping. Or in some true/false combinations, it is completely locked and it cannot go back once it is expanded. </p>
