is it possible to show one div and hide all other div on toggle..?

Question

I have three headings and all three have some description.
when i click on first heading, i can see its description.
when i click on 2nd heading, i can see its description.
my code is here:
js:

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

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

html code:

<div class="layer1">
    <p class="heading">Header-1 </p>
    <div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    <p class="heading">Header-2</p>
    <div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    <p class="heading">Header-3</p>
    <div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>

Now i want that when i click one 1 heading, other description have to hide and just description of 1st heading is visible.
how to do this..?

Answer 1

Hide all .content siblings of the chosen .content:

jQuery(".heading").click(function() {
    jQuery(this)
          .next(".content").slideToggle(500)
          .siblings(".content").slideUp(500);
});

Answer 2

Does this not work?

jQuery(document).ready(function() {
    jQuery(".content").hide();
    //toggle the componenet with class msg_body
    jQuery(".heading").click(function() {
        jQuery(".content").slideUp();
        jQuery(this).next(".content").slideDown(500);
      });
});​

http://jsfiddle.net/cUyhe/