title: use jQuery to expand/collapse ul list - having problems
body: <p>I'm trying to create a blog archive list which shows all articles by year and month (which I've done with PHP/MySQL)</p>
  
  <p>Now I'm trying to make it so that on page load, all years are collapsed except the latest year/month and also that each will collapse/expand on click.</p>
  
  <p>At the moment my jQuery click function will open or close all of the li elements rather than just the one I click. I'm still pretty new to jQuery so am not sure how to make it just affect the list section that I click on.</p>
  
  <p>Any help would be grand!</p>
  
  <p>Here's my code so far (the list is generated from PHP/MySQL loops)</p>
  
  <pre><code>&lt;ul class="archive_year"&gt;
  &lt;li id="years"&gt;2012&lt;/li&gt;
      &lt;ul class="archive_month"&gt;
          &lt;li id="months"&gt;September&lt;/li&gt;
              &lt;ul class="archive_posts"&gt;
                  &lt;li id="posts"&gt;Product Review&lt;/li&gt;
                  &lt;li id="posts"&gt;UK men forgotten how to act like Gentlemen&lt;/li&gt;
                  &lt;li id="posts"&gt;What Do Mormons Believe? Ex-Mormon Speaks Out&lt;/li&gt;
                  &lt;li id="posts"&gt;Here is a new post with lots of text and a long title&lt;/li&gt;
              &lt;/ul&gt;
          &lt;li id="months"&gt;August&lt;/li&gt;
              &lt;ul class="archive_posts"&gt;
                  &lt;li id="posts"&gt;A blog post with an image!&lt;/li&gt;
              &lt;/ul&gt;
      &lt;/ul&gt;
  &lt;li id="years"&gt;2011&lt;/li&gt;
      &lt;ul class="archive_month"&gt;
          &lt;li id="months"&gt;July&lt;/li&gt;
              &lt;ul class="archive_posts"&gt;
                  &lt;li id="posts"&gt;New Blog!&lt;/li&gt;
              &lt;/ul&gt;
      &lt;/ul&gt;
  &lt;li id="years"&gt;2009&lt;/li&gt;
      &lt;ul class="archive_month"&gt;
          &lt;li id="months"&gt;January&lt;/li&gt;
              &lt;ul class="archive_posts"&gt;
                  &lt;li id="posts"&gt;Photography 101&lt;/li&gt;
              &lt;/ul&gt;
      &lt;/ul&gt;
  &lt;/ul&gt;​
  </code></pre>
  
  <p>And here is the jQuery so far:</p>
  
  <pre><code>$(document).ready(function() {
  
  //$(".archive_month ul:gt(0)").hide();
  
  $('.archive_month ul').hide();
  
  $('.archive_year &gt; li').click(function() {
      $(this).parent().find('ul').slideToggle();
  });
  
  $('.archive_month &gt; li').click(function() {
      $(this).parent().find('ul').slideToggle();
  });
  
  
  });
  </code></pre>
  
  <p>I was experimenting with the $(".archive_month ul:gt(0)").hide(); but it didn't work as expected, it would switch the open and closed around.</p>
  
  <p>Any help/thoughts?</p>
  
  <p>Also, here is a fiddle for live example: <a href="http://jsfiddle.net/MrLuke/VNkM2/1/">http://jsfiddle.net/MrLuke/VNkM2/1/</a></p>