Show/hide using jquery

JavaScript
1

Hello… Here is my code which makes a div appear/close on heading. I want this div to close utomatically when i click anywhere outside this div. How can i achieve that?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<style>
.layer1 {
margin: 0;
padding: 0;
width: 500px;
}

.heading {
margin: 1px;
color: #fff;
padding: 3px 10px;
cursor: pointer;
position: relative;
background-color:#c30;
}
.content {
padding: 5px 10px;
background-color:#fafafa;
}
p { padding: 5px 0; }
</style>
<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery(".content").hide();
  //toggle the componenet with class msg_body
  jQuery(".heading").click(function()
  {
    jQuery(this).next(".content").slideToggle(500);
  });
});
</script>
</head>

<body>
<div class="layer1">
<p class="heading">Header-1 </p>
<div class="content">Hello</div>
</div><hr/>
</body>
</html>
2

You can do that by attaching an event listener to the document using the on() method.
If the div is showing and the event came from outside of the div, which could be done by using the parents() method, you know that you can close it.

3