jQuery toggle multiple divs within other divs independently

I've checked through the related questions but I haven't found the right combination of things to make this work.

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

<div class="wrapper">
    <div class="date"></div>
    <div class="subject"></div>
    <div class="who"></div>
    <div class="body"></div>
</div>

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

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

Here's what I've got so far.

$('.wrapper').click(function () {
    $('.body').toggle();
});

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.

Have you tried putting it in the onready function. Like so:

$(function () {
  $('.wrapper').click(function () {
    $('.body').toggle();
  });
});

Putting it in this function ensures it'll run after the document has completely loaded... otherwise it'll try to attach the click handler to an element that hasn't loaded yet (and therefore, doesn't exist).

Check out my JSFiddle (http://jsfiddle.net/XGsVE/3/). This code will toggle the BODY div of the clicked WRAPPER. Leaving out the $(this) causes ALL of the BODY divs to toggle, despite the wrapper they are in.

$('.wrapper').click(function () {
    $(this).find('div.body').toggle();
});

I think you need to select what you want to toggle off of another class if you want to be able to hide it again. Toggling the body class will remove it from the div sow when you click the wrapper again, it will not be selectable.

<div class="wrapper">
    W
    <div class="date">d</div>
    <div class="subject">s</div>
    <div class="who">w</div>
    <div class="body isbody">b</div>
</div>

And the javascript:

$('.wrapper').click(function () {
    $(this).children('.isbody').toggleClass('body');
});

http://jsfiddle.net/vuBNd/