Hi all, I am not an expert at jquery but trying to get a menu to work. Basically, I have a menu made of up to 3 levels of nested lists. The first level has a little arrow has a background image that opens or close when opening the first level list. Any other nested lists don't need to have the background image. My script opens the menu when you click on it and is also supposed to switch the first level list from a class "inactive" to a class "active". Here is the script:

$(document).ready(function(){

$("#left-navigation-holder ul.level1 li.inactive").toggle(function(){

$(this).addClass("active");

}, function () {

$(this).removeClass("active");

});


$("#left-navigation-holder li a").click(function(){

menu = $(this).parent('li').children('ul');

menu.toggle();

});

});

The problem is that the toggle function also happens when clicking on second and third level lists causing the arrows to toggle even if the first level list isn't clicked on. I thought using $("#left-navigation-holder ul.level1 li.inactive").toggle would limit the function to the first level list with a class "inactive".

Any help would be really appreciated.

Ben