Question

30

Show div on click on button, then hide this div when clicking outside of it

rated 0 times [ 32] [ 2] / answers: 1 / hits: 16553 / 9 Years ago, fri, january 22, 2016, 12:00:00

HTML

<div id=selectPeriodRangePanel>

    <p>Test</p>

</div>



<button id=period_select_range_btn>Select Range</button>

JQUERY

$(#period_select_range_btn).off().on(click, function(){

    $(#selectPeriodRangePanel).toggle();

});

When i click on button, the selectPeriodRangePanel DIV is opened. I would like to hide this DIV when i click outside of it.

How can i do that ?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ishmaelw

Add To Favorites

Follow

Total Points: 528

Total Questions: 96

Total Answers: 103

Location: Venezuela

Member since Sat, Apr 24, 2021

3 Years ago

answered 9 Years ago tobyl · Accepted Answer

Try this

$(document).on(click, function(e){

    if($(e.target).is(#period_select_range_btn)){

      $(#selectPeriodRangePanel).show();

    }else{

        $(#selectPeriodRangePanel).hide();

    }

});

<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>

<div id=selectPeriodRangePanel style=display:none>

    <p>Test</p>

</div>



<button id=period_select_range_btn>Select Range</button>