Question

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');
    })
})