Use JQuery to keep active sub-navigation open when loading a new page

Question

I have built a sidebar navigation that collapses & expands when the nav titles are clicked. this all works great. however, if i expand / open one of the nav groups and click to go to a page, when the new page loads all the nav groups start out closed again. I would love to find a way for the active nav group to stay open.

Here is what I've used for the collapse / expand: (it's currently set up so that only one of the nav groups will be open at a time)

/* Collapse and Expand */
$(".slideTitle").click(function() {
    $(".indexListOpen").removeClass("indexListOpen").addClass("indexList");
    $(this).next().toggleClass("indexList").toggleClass("indexListOpen");
});

And this is what I was trying to use to keep the current nav group open when the new page loads:

/* keep current nav group open */
var path = location.pathname;
$('.indexListOpen a[@href$="' + path + '"]').addClass("selected");
$(".selected").parent().parent().removeClass("indexList").addClass("indexListOpen");

Not working ... so I'm sure I'm doing plenty wrong. The page I am working on is located at instarservices.com/commercial

Any help is appreciated!!!

Answer 1

If you are using jQuery 1.3 or newer (point version), the attribute selectors cannot be called with the @ symbol. Additionally the presence of the starting slash may be causing problems. So I would recommend doing this:

var path = location.pathname.replace(/(^\/)/g,''); // Removes the opening slash if present
$('.indexListOpen a[href$=' + path + ']').addClass("selected");

If you run into browser differences (works in some, not in another) then check three things:

1. You may need to escape the / character before using it in the jQuery selector
2. You may be getting a trailing slash in the pathname that is not present at the end of your selectors
3. On most Windows servers, url's are not case sensitive. You will want to add .toLowerCase() to the end of the path = location ... statement and make sure your href attributes are all lower case.

Good luck, and if these suggestions don't work, try posting your HTML for your navigation to help us troubleshoot it further.

Answer 2

As dcneiner said the @ has been deprecated in the latest version of jQuery. But it looks like you are targeting a indexListOpen that doesn't exist on a fresh page load. So either remove that or change it to indexList and it should work

$('a[href$="' + path + '"]').addClass("selected");

or

$('.indexList a[href$="' + path + '"]').addClass("selected");