Hi there,

I have this code for animating a vertical menu. It changes the width of a menu item to using .animate().

So the behaviour now is: When my mouse is over the menu item, it expands (width 220px), when I remove my mouse it shrinks back (width 95px). Now I want it to stay expanded when I click on it and shrink back and expand a new menu item when I click it.

Menu item are listed, using different css classes for designing their looks.

1. $(document).ready(function(){
2.         $("li").mouseover(function(){
3.         $(this).stop().animate({width:'220px'},{queue:false, duration:250})
4.     });
5.             $("li").mouseout(function(){
6.         $(this).stop().animate({width:'95px'},{queue:false, duration:250})
7.     });
8. });

Any help would be greatly appreciated,

Ruben

EDIT: this is the site itself: http://chirolonderzeel.be/fw/