Expand on click, collapse on click outside

Question

I have an element which I want to expand on click and then collapse on click outside and thus came up with the following code. However when I run this it will start to expand and then immediately collapse since both functions are called sequentially. I don't understand why and how to solve this.

jQuery(document).ready(function() {

var element         = jQuery("#search-main");
var defaultWidth    = jQuery("#search-main").css('width');
var expandWidth     = "200px";

var fnSearch = {
    expand : function() {

        jQuery(element).animate({
            width : expandWidth
        });

        jQuery(document).bind('click', fnSearch.collapse);
    },

    collapse : function() {

        jQuery(element).animate({
            width : defaultWidth
        });

        event.stopPropagation();

        jQuery(document).unbind("click", fnSearch.collapse);

    }
}

jQuery("#search-main").bind("click", fnSearch.expand);

});

Answer 1

You are having the problem because the #search-main click event is propagating to the document; ie first the #search-main click event triggers, then the document click event triggers. Click events do this by default. To stop this event propagation, you want to use http://api.jquery.com/event.stoppropagation/ in your expand function:

jQuery(document).ready(function() {

var element         = jQuery("#search-main");
var defaultWidth    = jQuery("#search-main").css('width');
var expandWidth     = "200px";

var fnSearch = {
    expand : function(event) { // add event parameter to function
        // add this call:
        event.stopPropagation();

        jQuery(element).animate({
            width : expandWidth
        });

        jQuery(document).bind('click', fnSearch.collapse);
    },

    collapse : function() {

        jQuery(element).animate({
            width : defaultWidth
        });

        jQuery(document).unbind("click", fnSearch.collapse);

    }
}

jQuery("#search-main").bind("click", fnSearch.expand);

});

That said, Jason P's solution is better for what you want. It's more reliable and less messy, since you don't have to bind stuff to the document , which can easily become hard to track and cause conflicts with other code if you use that strategy habitually.

Answer 2

You could unbind the click event from the #search-main element after clicking, or stop the propagation of the event, but I would recommend binding to the blur and focus events instead:

http://jsfiddle.net/6Mxt9/

(function ($) {
    $(document).ready(function () {
        var element = jQuery("#search-main");
        var defaultWidth = jQuery("#search-main").css('width');
        var expandWidth = "200px";

        $('#search-main').on('focus', function () {
            $(element).animate({
                width: expandWidth
            });
        }).on('blur', function () {
            $(element).animate({
                width: defaultWidth
            });
        });
    });
})(jQuery);

That way, it will work even if the user tabs in or out of the field.