Jquery slidedown first child level elements

Question

I have one class of divs ('open') the contain another class of divs ('items') like this:

<div class="open">
    <div class="item">
    this is a test 1
    </div>

    <div class="item">
    this is a test 2
    </div>
</div>

What I'm looking to do is a slidedown of all the 'item' class divs that are in the 'open' class that's clicked.

So far I have

$(document).ready(function () {

    $('.open').click(function () {

        $(this).find(':first-child').slideDown('1000');

    });

but it's not working. Any suggestions?

Thanks, John

Answer 1

Instead of :first-child you want immediate children, which you can get in this case using .children(), like this:

$('.open').click(function () {
  $(this).children().slideDown('1000');
});

:first-child is for getting the first child element at each level (and in each "branch"), .children() or the child selector (>) are for getting all immediate/"first level" children.

Answer 2

How about

$(".open").click(function() {
    $(this).children().slideDown(1000);
});

Answer 3

First, I assume that you're actually closing off the $(document).ready, since in the code block you posted, it's not closed. Make sure you're doing so in your code.

Second, aren't you just looking for children() of .open? In which case you want

$(document).ready(function() {
  $('.open').click(function() {
    $(this).children('.item').slideDown('1000');
  });
});

Edited: Thanks to comments, I've removed the live() suggestion.