is it possible to show one div and hide all other div on toggle..?
<p>I have three headings and all three have some description.<br>
when i click on first heading, i can see its description.<br>
when i click on 2nd heading, i can see its description.<br>
my code is here:<br>
js:</p>

<pre><code>&lt;script type="text/javascript"&gt;
jQuery(document).ready(function() {
jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function()
{
jQuery(this).next(".content").slideToggle(500);
});
});
&lt;/script&gt;
</code></pre>

<p>css:</p>

<pre><code>.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; }
</code></pre>

<p>html code:</p>

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

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