Hide a DIV when the user clicks outside of it using jQuery

Question

I am using this code:

$(document).ready(function(){
    $(".SlideDiv").hide();
    $(".Show_hide").show();

    $('.Show_hide').click(function(){
        $(".SlideDiv").slideToggle();
    });
});

And this HTML:

    <a href="#" class="Show_hide">Show/hide</a>
<div class="SlideDiv">this is content page
<a class="agree" href="https://www.google.com/" target="_blank">google</a>
</div>

And this CSS:

.SlideDiv
{  
    height:200px;
    background-color:gray;
    margin-top:10px;

}
.Show_hide
{
    display:none;
}

The problem is that I have links inside the DIV and when they click that link open but show function didn't hide.

Demo

have a look at [here](http://www.codesynthesis.co.uk/code-snippets/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it). Also what's your issue on click of inside link ?? — Nad, Sep 04 '15 at 11:00

Nishith Kant Chaturvedi · Answer 1 · 2015-09-04T11:07:37.063

1

you can do this with a js "mousedownoutside.js" using following code

http://benalman.com/projects/jquery-outside-events-plugin/

    $('yourDiv').on('mousedownoutside', function(event){
    var target = $( event.target );
    if($(this) != target){
        $(this).slideUp();
    }

});

edited Sep 04 '15 at 11:07

answered Sep 04 '15 at 10:58

Nishith Kant Chaturvedi

4,719
2
16
24

@IvinRaj we're not here to do it all for you. Read the answer, learn what is says and apply it yourself. – Popnoodles Sep 04 '15 at 11:04
Agree two dots are there.. My mistake – Nishith Kant Chaturvedi Sep 04 '15 at 11:07

rrk · Accepted Answer · 2015-09-04T11:14:19.623

DEMO

No need to use any plugins for this. You just need to bind every click on the document to a function and check if the click was on an object is not any of the functional links. event.stopPropagation() is used to prevent bubbling of events.

$(document).ready(function(){
    $(document).on('click',function(e){
        if( !$(e.target).is('.Show_hide, .SlideDiv') ||   
            !$(e.target).parents('.Show_hide, .SlideDiv').length == 0){
            $(".SlideDiv").slideUp();
            e.stopPropagation();
        }
    });
    $(".SlideDiv").hide();
    $(".Show_hide").show();

    $('.Show_hide').click(function(){
        $(".SlideDiv").slideToggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a href="#" class="Show_hide">Show/hide</a>
<div class="SlideDiv">this is content page
<a class="agree" href="https://www.google.com/" target="_blank">google</a>
</div>

Hide a DIV when the user clicks outside of it using jQuery

2 Answers2

Linked