Question

I have this code to show/hide (toggle) a div when clicking a link:

$('#complete-services-link').toggle(
    function () {
         $('#complete-services-box').fadeIn('fast');
    }, 
    function () {
         $('#complete-services-box').fadeOut('fast');
    }
);

The #complete-services-box is the div that is being shown/hidden, typically you would click on the link again to close the box, but if I make it so you can click on the box to close it and then click the toggle link, I would have to double click it because the link is listening for the second function $('#complete-services-box').fadeOut('fast');.

I want to make it so when I click on the box the code above starts over. I tried this with no luck:

$('#complete-services-link').toggle(
    function () {
        $('#complete-services-box').fadeIn('fast');
    }, 
    function () {
        $('#complete-services-box').fadeOut('fast');
        $('#complete-services-box').click(function () {
             $('#complete-services-box').fadeOut('fast');
        });
    }
);

Answer 1

use .stop(true,true) like this,

$('#complete-services-link').toggle(
    function () {
         $('#complete-services-box').stop(true,true).fadeIn('fast');
    }, 
    function () {
         $('#complete-services-box').stop(true,true).fadeOut('fast');
    }
);