List doesn't want to toggle

Question

Hello, I have a (semantically incorrect) HTML like this:

<ul>
<li class="year">2009</li>
<li><a href="project1.html">Project 1</a></li>
<li><a href="project2.html">Project 2</a></li>
<li><a href="project3.html">Project 3</a></li>
</ul>

<ul>
<li class="year">2008</li>
<li><a href="project4.html">Project 4</a></li>
<li><a href="project5.html">Project 5</a></li>
<li><a href="project6.html">Project 6</a></li>
</ul>

<ul>
<li class="year">2007</li>
<li><a href="project7.html">Project 7</a></li>
<li><a href="project8.html">Project 8</a></li>
<li><a href="project9.html">Project 9</a></li>
</ul>

and a jQuery script like this:

$(function() {
    $('.year').click(function() {
     $('ul').find('li:not(.year)').slideUp('fast');
     $(this).closest('ul').find('li:not(.year)').toggle('fast');
    })
})

It works almost as needed. By default all ul li-s are hidden except those having the class year. When the user clicks on a year, any opened year's links slide up and the clicked year's links slide down. The problem is that if I click on a year when it's opened it first slides up (being intercepted by the first line) and then slides down via the toggle line. I'd like it to stay closed with the slide up line not intercepting the currently clicked year.

Hope this makes sense.

Any help appreciated.

Answer 1

May be you should use the :hidden or :visible selector to distinguish which are already shown.

$(function() {
    $('.year').click(function() {
        $('ul').find('li:not(.year)').slideUp('fast');
        $(this).closest('ul').find('li:not(.year):hidden').toggle('fast');
    })
})

Answer 2

In therms of the :not is it not true that you can only use filter as opposed to find expressions in here e.g. :not(:blah) or :not([blah] but not :not(.blah)?