Expand Collapse (toogle) div

/*
if there a situation that need to have arrange div as blocks/bricks structure then follow this
*/

STEP1:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
STEP2:
<div class="divHeading">
Heading 1
</div>
<div class="divContent">
contents here 1
</div>
<div class="divHeading">
Heading 2
</div>
<div class="divContent">
contents here 2
</div>

STEP3:
.divHeading {
margin: 1px;
color: #fff;
padding: 3px 10px;
cursor: pointer;
position: relative;
background-color:#c30;
}
.divContent {
padding: 5px 10px;
background-color:#fafafa;
}

STEP4:
<script type="text/javascript">
$(document).ready(function() {
  $(".divContent").hide();
  //toggle the componenet with class msg_body
  $(".divHeading").click(function()
  {
    $(this).next(".divContent").slideToggle(500);
  });
});
</script>