jQuery: Hide element on click anywhere else apart of the element

You can use the jQuery .blur() function to hide a div when user click on other element (like link, boutton, whathever..)

The blur event is fire when an element is loosing the focus (user select another element on the DOM tree)

I don't understand the link with your toggle. If your toggle button manage the DIV, its inside the toggle function that you should place the hide()/show() on the div, in the same time as updating the text of the button.

You can resort to the concept of event delegation.

$(function() {
    $(document).on('click', function(e) {
        if (e.target.id === 'div1') {
            alert('Div Clicked !!');
        } else {
            $('#div1').hide();
        }

    })
});​

Check FIDDLE

I did not understand what you meant by integrating with the other part.. This is the basic idea..