expand collapse (toggle) div layer using jQuery

html

<div class="layer1">
<p class="heading">Header-1 </p>
<div class="content">a</div>
<p class="heading">Header-2</p>
<div class="content">b</div>
<p class="heading">Header-3</p>
<div class="content">c</div>
</div>

css

.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; }

Javascript

<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>