jQuery toggle multiple divs within other divs independently
<p>I've checked through the related questions but I haven't found the right combination of things to make this work.</p>

<p>I'm trying to hide / show a div within a another div. There are 20 of such wrapper divs per page.</p>

<pre><code>&lt;div class="wrapper"&gt;
    &lt;div class="date"&gt;&lt;/div&gt;
    &lt;div class="subject"&gt;&lt;/div&gt;
    &lt;div class="who"&gt;&lt;/div&gt;
    &lt;div class="body"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I'm trying to show the class="body" div which is set to display:none; in css.</p>

<p>I've tried using the jQuery toggle(), toggleClass() functions with no success.</p>

<p>Here's what I've got so far.</p>

<pre><code>$('.wrapper').click(function () {
    $('.body').toggle();
});
</code></pre>

<p>I know it's a very tiny piece of code, sadly I've just started to learn jQuery and don't know how to proceed from this.</p>
