CODEWITHSUNDEEP
jquerythisslidedown
victor
victor

Reputation: 45

Jquery slidedown first child level elements

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

Upvotes: 1

Views: 2884

Answers (3)

Josh Smith
Josh Smith

Reputation: 15042

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.

Upvotes: 0

Marko
Marko

Reputation: 72230

How about 

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

Upvotes: 2

Nick Craver
Nick Craver

Reputation: 630579

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.

Upvotes: 4

Related Questions