Hide a div by clicking outside (jquery)

JavaScript
1

I have a table that display users in a database. When a user clicks on the usergroup a dropdown div will appear with a selection of available usergroups. I would like that div to hide again when the user clicks outside that div

here is the code for the div

<tr id='10003'>

<td><a href='index.php?frame=main&m=member&a=edituser&id=10003'>tstUser-0</a></td>
	<td>	
		<div class='container'>
		<span id='usergroup-10003' class='user-ajax-hover'>Registered Users</span>
		<div id='ugselect-10003' class='userpopup'>
			<h4>Change Usergroup</h4>
			<ul>
			<li><a href='#' id='4'>Administrators</a></li>
<li><a href='#' id='3'>Moderators</a></li>
<li><a href='#' id='2'>Registered Users</a></li>
</ul>
		</div>
		</div>

I have no problem displaying the hidden div but i can’t get it to close when the user clicks outside.

Any ideas?

2

I’ve done a bit of messing around, and there may be an easier way to do this but here’s what I’ve come up with:

In your jQuery file do something like this in your $(document).ready() function:


$(document).click(function(e){
     var elem = $(e.target).attr('id'); //this should give you the clicked element's id attribute
     if(elem !== 'ugselect-10003'){
         $('#ugselect-10003').slideUp('slow'); //or however you want to hide it
     }
});

I haven’t tested all of that but I think the idea is there if you want to mess around with it. I did try the first part (checking the clicked element’s id) and that worked for me.

3

Thanks for the reply. I’ve actually decided to take a different route. Instead of closing when you click outside, I’ve decided to include a close “X” in the upper right corner which, when clicked, triggers the dive to hide