Simple jQuery accordion

Browsing through jQuery plugins gave me an idea to use accordion, neat JavaScript effect to toggle ontent. There are many accordion plugins or standalone solutions, but ot one of them fitted my needs. So I created my own accordion like effect.

Problems with existing accordions


My first shot was the original jQuery accordion. I wasn't really expecting any difficulties with implementation of this one, but they occured. I followed to the demos page and found what I wanted. I was looking for something like the second example in the first box of this page, so I started to work on it. I was pretty shocked about the fact that this accordion needed 4 JavaScript includes, but whatever, moving on. But what was worse, I discovered some strange functionality of this example. The functionality degraded into the first example functionality. I tried several things but hey, what could I possibly do wrong about this code:

jQuery('#list1b').accordion({
    autoheight: false
});


Nothing helped, so I moved on to another experiment. I've found many accordions on the internet and I tested some of them. There were some very simple, but with effect different of what I wanted, with no option to scale the effect. There were also some, that worked, but they needed to be initialised with a relative lot of code. After a while I gave up and focused on my own solution. I used simple jQuery slideUp & slideDown effects to achieve desired effect (+-). So here is my code:

$(function () {
    $('#articles a.control:first').addClass('active');
    $('#articles a.control:first').next('div').addClass('active');
    $('#articles a.control:gt(0)').next('div').css('display','none');
 
    $('#articles a.control').bind('click',function () {
        if (!$(this).hasClass('active'))
        {
            $(this).parents('#articles').find('div.active').slideUp('fast');
 
            $('#articles .active').removeClass('active');
 
            $(this).addClass('active');
            $(this).next('div').slideDown('normal').addClass('active');
        }//if (!$(this).hasClass('active'))
    });
});</p>


This code provides the desired functionality on my articles page. It adds this
functionality to my list of articles, which has the following HTML structure:

<li>
    <div>
        <a class="control">link text</a> - posted date info
 
        <div>
            <p>
                text
            </p>
        </div>
    </div>
</li>


These LI items are of course in an UL element (with id="articles").