Question

I found a tutorial on css tricks to make a simple accordion.

http://css-tricks.com/snippets/jquery/simple-jquery-accordion/

I noticed this is not really based on a navigation, but I could see how it was working so I made some simple adjustments to make it work with a un-ordered list navigation menu. But at the time, even though I got the animation to run sweet, I did not realize this would disrupt the actual anchor click events.

var allPanels = $('.sub-menu').hide();

$('li.menu-item a').click(function() {
    allPanels.slideUp();
    $(this).parent().find('ul').slideDown();
    return false;
});

Please see jsfiddle I have created to demonstrate issue.

http://jsfiddle.net/Yj4px/2/

As you can see all the links are dead, and the just activate the script.

I would really appreciate any pointers please as I’m stuggling with this one. I would really like to avoid a jquery plugin at all costs. Thanks in advance.

---

At a guess, the script only needs to run li.menu-item contains a ul – I cannot add classes as the menu will be dynamically generated by a cms, and could change at anytime. So script needs to run by itself.

Answer 1

You need to return false only if the <a> tag is not a direct link or browser will still want to go back to top of page

Change href of accordion headers that have panels to “#”. Redirect links will work normally with following “IF”, accordion will work normally alos

$('li.menu-item a').click(function() {
    if($(this).attr('href')=="#"){
        allPanels.slideUp();
        $(this).parent().find('ul').slideDown();
        return false;
    }
});

In your server code add a class “active” to link within panel that needs opening ( match the href to the url)
On page load

$('a.active').closest('ul').slideDown()