title: jQuery animation on nested divs
body: <p>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 am almost there, but as you can see, it only seems to work on anything that isn't a nested div. (So if I include just text inside that section or p tags or anything else, it will show, but not the children divs.) My code is here: <a href="http://jsfiddle.net/DScMX/16/" rel="nofollow">http://jsfiddle.net/DScMX/16/</a></p>
  
  <p>Furthermore, I want to be able to display the latest year (in my example) when the page is loaded, and then when clicking on each year, as mentioned, it hides what's on the page and displays the correct section.</p>
  
  <pre><code>&lt;div id="years_links"&gt;
      &lt;a href="#" id="2013"&gt;2013&lt;/a&gt; | 
      &lt;a href="#" id="2012"&gt;2012&lt;/a&gt; | 
      &lt;a href="#" id="2011"&gt;2011&lt;/a&gt;
  &lt;/div&gt;
  &lt;div id="yearscontent"&gt;
      &lt;div id="2013"&gt;
          &lt;pclass='item'&gt;some 2013 stuff&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="2012"&gt;
          &lt;div class='item'&gt;some 2012 stuff&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="2011"&gt;
          &lt;div class='item'&gt;some 2011 stuff&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the js</p>
  
  <pre><code>$(document).ready(function() {
      var yearscontent = $('#yearscontent');
      $('#yearscontent div').hide();
      $('#years_links a').click(function() {
          var year = $(this).attr('id');
          $('#yearscontent div').slideUp(300);
          $('#yearscontent #'+year).slideDown(300);
      });
  
  }); 
  </code></pre>