Jquery Animation On Nested Divs

I'm trying to create a nav of links that correspond to different divs in the page, and when you click on the link, it hides all the other divs and slideDown the respective div. I a

Solution 1:

$('#yearscontent div') selects all divs below #yearscontent. If you use $('#yearscontent > div'), it will select only the direct descendant of #yearscontent.

Also, element id's need to be unique, so you'll need to rework your html/script a little bit. I would use classes instead.

Updated fiddle: http://jsfiddle.net/N5euG/

Update to answer your question in the comments

Consider this html:

<div id="topDiv">
    <div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div>
</div>
<div id="div4"></div>

#topDiv div will select #div1, #div2, and #div3. Any divs within #topdiv

#topDiv > div will select only #div1. Just the direct descendant of #topDiv.

Solution 2:

I added in some CSS so and an "active" class so that your slide up and down isn't jittery.

#yearscontentdiv:nth-child(1n+2) {
    display:none;
}

http://jsfiddle.net/N5euG/8/