How to use jQuery slideDown() to display _almost_ all contents?

I have a div within a div. On page load, they should both be hidden, then when I trigger the slideDown() function on the outer div, I want the inner div to remain hidden. How can I achieve this?

<script>
$(function(){
    $('.body').hide();
    $('.display').click(function(){
        $(this).closest('.wrapper').find('.body').slideDown();
    });
});
</script>

<div class="wrapper">
    <a class="display" href="#">Display Outer</a>
    <div class="body">
        Now displaying outer div
        <div cla开发者_运维知识库ss="wrapper">
            <a class="display" href="#">Display Inner</a>
            <div class="body">
                Now displaying inner div
            </div>
        </div>
    </div>
</div>

Here is an example of it not working: http://jsfiddle.net/b7Tpt/

---

The reason it doesn't work is the use of find. find would traverse all levels to find the matches while the children would travel single level. So use find('.body:first') or children('.body')

$(function(){
    $('.body').hide();
    $('.display').click(function(){
        $(this).closest('.wrapper').find('.body:first').slideDown();
    });
});

Updated Example

OR

$(function(){
    $('.body').hide();
    $('.display').click(function(){
        $(this).closest('.wrapper').children('.body').slideDown();
    });
});

Updated Example

---

Try -

$('.display').click(function(){
    $(this).siblings('.body').slideDown();
});

I think $(this).closest('.wrapper') was moving up the DOM tree and finding the top most wrapper div then opening all the body classes it found underneath. Using siblings should get the element with a body class that is directly beneath the clicked link.

Demo - http://jsfiddle.net/pMgVj/1/

---

try this: http://jsfiddle.net/Kf6gk/