CODEWITHSUNDEEP
jquery
Alex
Alex

Reputation: 929

How to add a close event when click outside of its content

I have a chat section fixed at the bottom of my website, it has a 'toggle' function, so it means it closes and open when the user hit the 'Chat support' button, what I want to do is to add the functionality that closes the chat even if you hit outside the button but I don't know how to do that.

I leave my js code below, it's just a simple toggle function, I hope you guys can help me with this, as you can see I'm really new in jQuery.

Code:

$('#ChatToggle').click(function(){
    $('#ChatContainer').toggle('slow');
});

Thanks in advance.

Upvotes: 0

Views: 63

Answers (4)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

Banana's answer was close, as was showdev, but you also need to stop the click of the ChatContainer. I also simplified the "other" click handler:

http://jsfiddle.net/785xrb4s/5/

$('#ChatToggle').on('click',function(e){
    e.stopPropagation();
    $('#ChatContainer').toggle('slow');
});

$(document).click(function(){
    $('#ChatContainer').hide("slow");
});

$('#ChatContainer').click(function(e){e.stopPropagation()}).hide();

Upvotes: 2

showdev
showdev

Reputation: 29168

One method is to bind another click event to the document itself (or a different ancestor, if you like):

$(document).on('click',function(){
    $('#ChatContainer').hide('slow');
});

When you click the toggle button, the click event will bubble up the DOM tree to the document. This will fire both the "toggle" and the "hide" methods, causing the container to open and then immediately close. To prevent that, we'll need to stop that propagation in the "toggle click" listener with stopPropagation():

$('#ChatToggle').on('click',function(e){
    e.stopPropagation();
    $('#ChatContainer').toggle('slow');
});

WORKING EXAMPLE

Edit:

As mentioned by Banana, clicking the container will also cause the container to close. If this is undesirable, bind a click event to #ChatContainer and call stopPropagation() and preventDefault(). To simplify, you can simply return false;, which does both:

$('#ChatContainer').on('click',function(){
    return false;
});

WORKING EXAMPLE

Upvotes: 2

Bojan Petkovski
Bojan Petkovski

Reputation: 6933

All answers are good but missing one thing, if you click inside the chat div it will close also. TO prevent this you need to check if the target of the click event is inside the chat div http://jsfiddle.net/qct3bb67/1/

$(document).on('click', function(e){
    if ($(e.target).closest("#ChatContainer").length === 0) {
        $('#ChatContainer').hide('slow');
    }
});
$('#ChatToggle').click(function(e){
    $('#ChatContainer').toggle('slow');
    e.stopPropagation();
});

Upvotes: 0

Banana
Banana

Reputation: 7463

you might want to do something of the sort:

$("*:not(#ChatContainer)").click(function(){
    $(this).hide();
});

or 

$("*").not("#ChatContainer").click(function(){
    $(this).hide();
});

or as suggested below, to avoid the extra handlers you could do delegation:

$(document).on("click","*:not(#ChatContainer)",function(){
    $(this).hide();
});

if you click on anything except the chat window, it will close...

Upvotes: 0

Related Questions