jQuery, Toggle within toggle
<p>I'm trying to create some sort of "spoiler" for a forum. It's pretty simple, though i'm fairly new to jquery. But now i got this problem when placing a toggle div element inside another toggle div element, the 2nd toggle doesn't work. Can anyone point me in the right direction?</p>

<p>Jquery</p>

<pre><code>$(document).ready(function(){
    $('.head').click(function() {
  $('.body').toggle('slow')
  });
});
</code></pre>

<p>HTML </p>

<pre><code>&lt;div class="head"&gt;
Show Content
&lt;/div&gt;
&lt;!--1st toggle div--&gt;
 &lt;div class="body" style="display:none;"&gt;
  Content
    &lt;div class="head"&gt;
     Show Content
    &lt;/div&gt;
     &lt;!--2nd toggle div--&gt;
     &lt;div class="body" style="display:none;"&gt;
     Content
     &lt;/div&gt;
 &lt;/div&gt;
</code></pre>

<p><a href="http://jsfiddle.net/ufC5B/" rel="nofollow">Jsfiddle here.</a></p>

<p>Thanks to everyone that's trying to help :)</p>

<p>EDIT:</p>

<p>Right after i posted i've seen that i was using multiple ID's in the HTML code.
I've changed the div id's to classes, but now when i click to show content1, content2
also shows up. Can someone help me with it?</p>
