Highlight active link in jQuery accordion menu

2 Views

So I found this jQuery Accordion Menu code for a WordPress site I’m working on. All is working well, but when I click a submenu item and the page loads, the accordion is closed. I would like the current section to be opened on page load so you can see what page you’re on.

I’ve tried a bunch of different things, using .slideDown('normal') on the class that WordPress assigns to the parent <li> of .current-menu-parent, etc. but alas nothing has worked yet. I’m not well versed with JavaScript/jQuery so hopefully someone can help me with this.

Read More

Here is the current jQuery code: 

( function( $ ) {
    $( document ).ready(function() {

        $('#cssmenu > ul > li > a').click(function() {

            $('#cssmenu li').removeClass('active');
            $(this).closest('li').addClass('active');   
            var checkElement = $(this).next();

            if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
                $(this).closest('li').removeClass('active');
                checkElement.slideUp('normal');
            }

            if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
                $('#cssmenu ul ul:visible').slideUp('normal');
                checkElement.slideDown('normal');
            }

            if($(this).closest('li').find('ul').children().length == 0) {
                return true;
            } else {
                return false;   
            }       

        });
    });
} )( jQuery );

This is where I got it from.

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. Without seeing your menu output, it’s a little hard to tell… but what you need to do is trigger the click event for not only the page being viewed, but it’s ancestors as well. And do this outside the click event. Something like this (your code, slightly modified):

    ( function( $ ) { $( document ).ready(function() {

    $('.current-page-ancestor > a').trigger('click');
    $('.current-menu-item > a').trigger('click');

    $('#cssmenu > ul > li > a').click(function() {

        $('#cssmenu li').removeClass('active');
        $(this).closest('li').addClass('active');   
        var checkElement = $(this).next();

        if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            $(this).closest('li').removeClass('active');
            checkElement.slideUp('normal');
        }

        if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#cssmenu ul ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
        }

        if($(this).closest('li').find('ul').children().length == 0) {
            return true;
        } else {
            return false;   
        }       

    });
});

} )( jQuery );

    As a side note, which I know doesn’t answer your direct question… but this whole process could be done easier with the use of CSS transitions over JS… and is much more reliable and less dependent on JS. You do use a small amount of JS to add/remove a class, but the css controls the animations.

    And if JS is disabled, you can have a much more graceful degradation… using the css :hover pseudo to allow the accordion to still function. Also, you can use the default WordPress menu classes to have the accordion open on page load through css, rather than relying on JS to find which one should be opened… Just a thought.