Question

UPDATE:

Tried using regex for the url and it works:

var url = window.location.pathname, 
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");

$("#accordion a").each(function()
{
    if(urlRegExp.test(this.href.replace(/\/$/,'')))
    {
        $(this).addClass("active-sidebar-link");
    }
});

I’m using the jQuery UI Accordion Widget to build a sidebar navigation menu for my website.
http://jqueryui.com/demos/accordion/

I have the following code:

// create accordion
$( "#accordion" ).accordion(
{
    header: '> li, h3:not(> li > ul)',
    collapsible: true,
    autoHeight: false,
    navigation:true 
});

// Add active class to active sidebar links
$("#accordion a").each(function() 
{
    if (this.href == window.location || this.href == document.location.protocol + "//" + window.location.hostname + window.location.pathname)
    {
        $(this).addClass("active-sidebar-link");
    }
});

The accordion works and the “navigation: true” option also works (http://jqueryui.com/demos/accordion/#option-navigation), it opens the appropriate accordion “drawer” based on the link you’re visiting.

However the active class is not being added to the current link.

Any ideas?

Answer 1

I would do a search function on the href value. If you have links to multiple pages, then you could take the code further to include window.location.pathname, but here’s a good start on searching for the domain name:

$("#accordion a").each(function() 
{
    if (this.href.search(window.location.hostname) != -1)
    {
        $(this).addClass("active-sidebar-link");
    }
});​

Or, as I said in my comment above, you may want to use a regex instead.