Jquery Hide Div When Click Outside

You can detect that clicked outside and hide div.

Demo

Html Part

[html]</pre>
<div class="selecter closed" id="dropdown"><span class="selecter-selected">Choose One</span>
<div class="selecter-options scroller scroller-active" id="" style="display: none;">
<div class="scroller-content"><span class="selecter-item">Google</span>
<span class="selecter-item">Yahoo</span>
<span class="selecter-item">Facebook</span></div>
</div>
</div>
<pre>
[/html]

Show/Hide When clicked on DIV

[js]
$("#dropdown").click(function(){
if($(‘.selecter-options’).is(":visible")){
$("#dropdown").attr("class", "selecter closed");
$(‘.selecter-options’).hide();
}else{
$("#dropdown").attr("class", "selecter open");
$(‘.selecter-options’).show();
}
});
[/js]

Hide When Clicked Outside of Div

[js]
$(document).mouseup(function (e){
var container = $("#dropdown");

if (!container.is(e.target) // if the target of the click isn’t the container…
&& container.has(e.target).length === 0) // … nor a descendant of the container
{
//hide here
$("#dropdown").attr("class", "selecter closed");
$(‘.selecter-options’).hide();
}
});
[/js]

You can find css and js codes on DEMO page. You can get them and test it on your web site.