Complex menu with jQuery

Question

I need a resettable menu with opening the first <ul> and the others are closed in jQuery

 <div class="accordion" id="list1b"> <a href="/index.php/jstride/vehicle"> Rides</a><ul class="navigation"> <li> <a class="menu_user_profile_ride_edit user_add_ride" href="/index.php/jstride/vehicle">Post My Ride</a> </li> <li> <a class="menu_user_profile_ride_edit user_edit_ride_new" href="/index.php/ride/recent">New Additions</a> </li> <li> <a class="menu_user_profile_ride_edit user_edit_ride_popular" href="/index.php/ride/popular">Most Popular</a> </li> <li> <a class="menu_user_profile_ride_edit user_edit_ride_myride" href="/index.php/myride">My Rides</a> </li> <li> <a class="menu_user_profile_ride_edit user_ride_search" href="/index.php/advancedsearch">Search for Rides</a> </li> </ul> <a href="/index.php/members/browse/controller/index">Friends</a> <ul class="navigation"> <li> <a class="menu_user_edit_update user_edit_member" href="/index.php/members">Browse Members</a> </li> <li> <a class="menu_user_edit_update user_edit_update" href="/index.php /user/updates">View Recent Update</a> </li> </ul> </div> 

When I get to the home page, I need to open the travel section, and the friends section should be closed. Please help me solve this problem.

Answer 1

Is this what you mean?

Answer 2

Judging by your margin, I think that what you need is very similar to what I have in my CMS. Using jQuery:

 jQuery(document).ready(function($) { $('#menu').accordionMenu(); } jQuery.fn.accordionMenu = function() { return this.each(function() { $('#menu ul').hide(); // hide all unordered lists $('#menu li.selected ul').show(); // drop down selected item sub-menu $('#menu li a').click(function() { var speed = 'fast'; var checkElement = $(this).next(); if (checkElement.is('ul')) { if (!checkElement.is(':visible')) { if ($('#menu ul:visible').length==0) { checkElement.slideDown(speed).parent().addClass('open'); } else { $('#menu ul:visible').slideUp(speed, function() { $(this).parent().removeClass('open'); checkElement.slideDown(speed).parent().addClass('open'); }); } } return false; } }); }); }; 

This plugin was written based on http://www.i-marco.nl/weblog/jquery-accordion-3/ .