Using Jquery How To Hide Div When Click Outside The Div

i wan’ to hide #button_ul div when click outside of div anywhere and i’m done with below code but problem is that once i click button it doesn’t slideToggle i wan’t to toggle #button_ul div when i click #edit_btn div

<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
	$('#edit_btn').click(function(){
		$("#button_ul").slideToggle(0);
	});
	$("body").mouseup(function(e)
	{
		var button_ul = $("#button_ul");
		if (!button_ul.is(e.target) && button_ul.has(e.target).length === 0)
		{
			$("#edit_btn a").css("background-color" , "rgba(153,153,153,0.6)");
			button_ul.css("display" , "none")
		}
	});
});

</script>
<style type="text/css">
#edit_btn{
	border: thin solid #000;
	background-color: #666;
	padding: 5px;
	width: 140px;
	text-align: center;
}
#edit_btn a{
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FFF;
	font-weight: bold;
}

#button_ul {
	border: thin solid #333;
	font-family: Arial, Helvetica, sans-serif;
	list-style-type: none;
	margin: 0px;
	border-radius: 0px 0px 4px 4px;
	background-color: #ddd;
	width: 135px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 5px;
	display: none;
}
#link1 {
	border: 0px;
	width: 100px;
	height: 20px;
	color: #C03;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 10px;
}
#link1:hover {
	text-decoration: underline;
}

#link2 {
	border: 0px;
	width: 100px;
	height: 20px;
	color: #C03;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 10px;
}
#link2:hover {
	text-decoration: underline;
}
</style>
</head>

<body>
<div id="edit_btn"><a href="#">Edit Profile Picture</a></div>
<ul id="button_ul">
<li>
<a id="link1" href="#">Upload Picture</a>
</li>
<li>
<a id="link2" href="#">Remove Picture</a>
</li>
</ul>
</body>
</html>

Hi,

Sorry to be picky, but there isn’t a <div> with an id of “button_ul”.
There is a <ul> with this id. Is this what you are referring to?

To rephrase your question:
When you click on the “Edit Profile Picture” button, you want it to slide down.
When you click anywhere outside of the “Edit Profile Picture” button, you want it to slide back up.
Is that correct?