Need help with jQuery UI Accordion navigationFilter option

Question

I'm building an accordion for navigation. Each section of the accordion has a set of links. The firing code looks like this:

$(document).ready(function() {
    $(".selector").accordion({
        collapsible: true,
        active: false,
        navigation: true
    });
});

This all worked fine and dandy until one of the links in each set was edited to point to a single file, call it foo.html. So now if you navigate to foo.html, the location.href matches every section of the accordion (since each section has a link to it) and that opens all the sections, defeating the purpose of the accordion.

So I'm pretty sure I need to use the navigationFilter option but I've googled the living hell out of it and haven't found any examples of how to build the function associated with it.

Help me, Stack Overflow!

Answer 1

This is an old question, but I struggled with this same issue today, so I thought I would answer this for anyone else who is looking.

I wanted to use the accordion navigation filter to match based on the last item in my route (using ASP.NET-MVC2). I came up with the following solution. It is not pretty, but it works.

My links look like: http://site.com/Home/Details/IDSTRING

The filter matches for any location.href that ends with IDSTRING.

You would probably want to move the location parsing code into the another location so it only runs once per page load instead of once per accordion element.

$("#accordion").accordion({ animated: false, autoHeight: false, collapsible: true, navigation: true, navigationFilter: function () {
    //Accordion NavigationFilter
    var locationHrefArray = location.href.split("/");
    var locationLastString = locationHrefArray[locationHrefArray.length - 1].toLowerCase();

    var sidebarHrefArray = this.href.split("/");
    var sideBarLastString = sidebarHrefArray[sidebarHrefArray.length - 1].toLowerCase();

    return locationLastString  == sideBarLastString;
} });