jQuery Navigation - Help Needed

Question

I am working on a site with a fairly large accordion style navigation (it does not use the accordion UI).

There are four sub-menu sections that toggle open when clicked. I have the active link highlighted. The one remaining step is to keep the current active sub-menu open when on a page within the sub-menu. I can keep it open when I am working with static pages, but on this site the navigation is an includes file and therefore I need some help working out a dynamic way to keep those sections open.

Here is the code I am using:

<script type="text/javascript">
$(function(){

$('ul#menu3 ul').hide();    
$('ul#menu3 > li > a.drop').click(function(){
$(this).parent().children('ul').toggle("slow");
   return false;
   });      
});
</script>

Basically what I need is some way to apply a class to the active group so that it will show. Any help would be greatly appreciated.

Thanks.

Answer 1

I would put the submenu animation in a function, so to call the submenu in, you use on your a href

onclick="showSubMenu('id')"

That function would handle the sliding in. Then once clicked onto a page that requires a submenu to appear, simply add to the end of your page a small

<script>document.ready(function() {showSubMenu('parent-id')});</script>

Hope this helps.

C

Answer 2

You probably need to apply the class dynamically either as a variable or on the element it self. e.g.

var page = 'ul#menu3';

Then use this variable to trigger the initial state e.g.

$('#ul#menu3').show();

This would would need to run before all the other javascript relating to the dropdowns

Answer 3

This is what I ended up using to solve the problem:

$(function(){
$('#mainContentTabs').tabs();
$('#subContentTabBoxes').tabs();
$('.interior #subContent > ul > li > a.drop').click(function(){
$(this).parent().children('ul').toggle("slow");
     return false;
});

$(window).ready(function() {
$('li.products ul').show();
    $('li.technical ul').show();
    $('li.tips ul').show();
$('li.quicklinks ul').show();
});

Thanks.