May be easier to use the jQuery vertical accordion menu plugin, which includes options to expand the menu as per your requirements – http://www.designchemical.com/lab/jquery-vertical-accordion-menu-plugin/getting-started/

I have been asked for the other menus not to close hen you click on another menu item.

E.G

Click On Item One – Expands
Click On Item Two- Expands

And the only way to get the items to close again would be to click on them again.

Hope that makes sensde, and you can help.

Many Thanks for this!!

Just add another sub-menu to the menu. The plugin will automatically handle it

Item 1

Sub-Item 1 a

Sub-Item 1 a 1
Sub-Item 1 a 2

i mean
inside a sublevel, put another one, like play with 3 depths.
any idea?

You can add

$('#nav li:first ul').show();

Thanks for the code. If I wanted to default the first list item to be expanded on the page load, how would I go about doing so?

Thanks.

The result is ok but it seems a little overpowered for my needs.

Exemple : i click on the submenu item 1 => the page load and the menu close the section 1 .. i want that the clicked submenu stay open (only for this session, no need for cookies).

Also, if i set a link to a li item, i can click on it but the link doesn’t open, only li contained in ul elements seems to work ..

  <li><a href="google.com">Accueil</a> => doesn't open anything
  </li>

Thanks a lot

Not sure if this is what you mean – jQuery Simple Vertical Accordion Menu with Cookies

first, i would like to thank you for sharing this code, it is very helpfull for me.

I’ve successfully integrated your menu on my test website but i would like to know if it is possible to let the submenu opened when i click on a submenu link ?

Thanks

The active menu item is given the CSS class “active” so you can style the link in your CSS style sheet using #nav li a.active {}

You can set the class of the relevant link item to “active” and then add the following jquery, which will open the sub-menu of the active item:

$('#nav a.active').each(function(){
    $(this).next().show();
  });

Yes there is already a demo for this – Simple Vertical Accordion Menu – Using Hover

Follow the source code for the demo page – you should see the code to load the jquery library and the code to create the accordion menu

#nav {float: left; width: 280px; border-top: 1px solid #999; border-right: 1px solid #999; border-left: 1px solid #999; margin-bottom: 15px;}
#nav, #nav ul, #nav li {list-style:none;}
#nav li a {display: block; padding: 10px 15px; background: #ccc; border-top: 1px solid #eee; border-bottom: 1px solid #999; text-decoration: none; color: #000;}
#nav li a:hover, #nav li a.active {background: #999; color: #fff;}
#nav li ul {display: none;}
#nav li ul li a {padding: 10px 25px; background: #ececec; border-bottom: 1px dotted #ccc;}

#nav {float: left; width: 280px; border-top: 1px solid #999; border-right: 1px solid #999; border-left: 1px solid #999; margin-bottom: 15px; list-style:none;}

#nav li a {display: block; padding: 10px 15px; background: #ccc; border-top: 1px solid #eee; border-bottom: 1px solid #999; text-decoration: none; color: #000; list-style:none;}

#nav li a:hover, #nav li a.active {background: #999; color: #fff; list-style:none;}

#nav li ul {display: none;}

#nav li ul li a {padding: 10px 25px; background: #ececec; border-bottom: 1px dotted #ccc; list-style:none;}

$(document).ready(function () {

$(‘#nav > li > a’).click(function(){

$(this).next().slideToggle();

if ($(this).attr(‘class’) != ‘active’){

$(this).addClass(‘active’);

} else {

$(this).removeClass(‘active’);

}

});

});

Item 1

Sub-Item 1 a

Sub-Item 1 b

Sub-Item 1 c

Item 2

Sub-Item 2 a

Sub-Item 2 b

Item 3

Sub-Item 3 a

Sub-Item 3 b

Sub-Item 3 c

Sub-Item 3 d

Item 4

Sub-Item 4 a

Sub-Item 4 b

Sub-Item 4 c

I was able to accomplish what I was trying to do (get all the menu bars the same color) by removing the #D7D4D4 url (skins/images/bg_grey.png) and replacing the whole thing with just my color choice and nothing else. That did the trick and I like the way it looks. I’m going to be messing around with a couple more customizations, so I might be back looking for help. I’m new to all this.

Thank you!

#dc_jqaccordion_widget-4-item ul a.dcjq-parent

I’m just beginning to get a web site set up and am using the latest version of the jQuery Accordion Menu. I’m very happy with it but wanted to customize the colors and can’t seem to get one of the menu blocks to match the others; it remains in the original grey color. It happens to be the only menu block with sub-menu items so I suspect that has something to do with it but can’t figure out what I need to change. Can you help?

Thank you!