Question

I have a accordion menu which is developed by using the below script

$(document).ready(function(){

    $('li.button a').click(function(e){
     $(this).addClass('active');

        /* Finding the drop down list that corresponds to the current section: */
        var dropDown = $(this).parent().next();

        /* Closing all other drop down sections, except the current one */
        $('.dropdown').not(dropDown).slideUp('100');
        dropDown.slideToggle('100');

        /* Preventing the default event (which would be to navigate the browser to the link's address) */
        e.preventDefault();     })      

});

I need to add the .active class when the menu is clicked so i have added addclass in jquery , it is adding the class but the problem is the class should be removed when the another menu is clicked. I tried even toggleclass also but didnt work.

And also I want the first li item to be opened by default when the page is opened.

Answer 1

Just add this at the beginning of your function :

$('li.button a').click(function(e){
    $('li.button a').removeClass('active');
    $(this).addClass('active');
    ...
});