jQuery access child of current parent

Question

I'm new to jQuery and I'm trying to do the following: access the child of the current div's parent ( or in other words: another child of the current div's parent ). My code looks like this ( this is what I tried ):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>
$(document).ready(function() {
    $("div.head").click(function() {
        $(this).parent().("div.content").slideToggle("normal"); //<- how?
    });
});
</script>

<div class="box">
<div class="head">
    Example
</div>
<div class="content">
    Content here.
</div>
</div>

I'm trying to do it this way because then I could just make more boxes the same way without having to add extra js to make it work for every box ( the toggle hide/show of each box's content).

Answer 1

<script>
$(document).ready(function() {
    $("div.head").click(function() {
        $(this).next("div.content").slideToggle("normal"); //<- easy
    });
});
</script>

Answer 2

If the two elements are on the same DOM level then you can use .siblings():

$(function() {
    $(".head").click(function() {
        $(this).siblings(".content").slideToggle("normal");
    });
});

Here is a demo: http://jsfiddle.net/L5kqs/1/

Your selector needed a .children() or a .find():

$(this).parent().children(".content").slideToggle("normal");

Also note that your selectors will perform faster if you omit the tag names. Only when there are a lot of DOM nodes to search through will that improve performance.

If you would like to read more about .siblings() this would be a good start: http://api.jquery.com/siblings

Answer 3

If all you're interested in is the element immediately after, use happytime harry's solution which uses .next(), i.e.:

$(this).next(".content").slideToggle("normal");

If you're looking for something more general, use one of the following:

// Search for elements which are direct children of parent
$(this).parent().children(".content").slideToggle("normal");  

// Search for siblings (same as above, but will not include $(this))
$(this).siblings(".content").slideToggle("normal");

// Search within all descendents of parent
$(this).parent().find(".content").slideToggle("normal");

Answer 4

you could try

 $(document).ready(function() {
     $("div.head").click(function() {
         $(this).parent().find(".content").slideToggle("normal"); //<- how?
     });
 });

or use siblings

 $(this).siblings(".content").slideToggle("normal");