use jQuery to expand/collapse ul list - having problems
<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/" rel="nofollow">http://jsfiddle.net/MrLuke/VNkM2/1/</a></p>
