jQuery accordion menu - keep accordion menu open to the page I am on

Question

I hope you can help. I'm very new to jQuery and am working on a five- or six-level accordion menu for my side navigation. I got the majority of the code I have so far from Dane Peterson @ daneomatic.com (thanks Dane!). But, I'm stuck on one thing:

I'd like to have my accordion/tree work like this:

When I navigate down into, say, level three, and click on the link to open the page linked to that level, how do I indicate once the level three page loads that I'm on that page? Also, how do I keep the tree open to that level when I load the page?

I guess what I'm asking is: is there a way for the accordion/tree to automatically update to show what page you're at, and have the tree open to that level?

Thanks in advance!

Solution 1

To get the accordion to automatically open the correct section based on the URL, you'll start with enabling the navigation option with something like:

$('#accordion').accordion('option', 'navigation', true);

By default, this option looks for the accordion header link that has an href that matches the URL fragment (if your URL is http://somesite.com/about#contact, #contact is the fragment) and opens that header link's section. Since you're using the accordion to navigate to different pages, you probably won't have URL fragments to match against, so you'll have to write a custom navigationFilter:

$('#accordion').accordion('option', 'navigationFilter', function(){ ... });

You can use the navigationFilter option to override how the accordion plugin matches header links to the URL of the current page.

So far, we've got the right section of the accordion to open based on the current page. Next, we need to highlight the link in that section that corresponds to the page. You'll do that with something like:

<script type="text/javascript">
  $(document).ready(function() {
    $('#accordion li').each(function() {
      var li = $(this);
      var a = $('a', li);
      if(/* compare the href of the 'a' element to the current URL */) {
        li.addClass('active');
      }
    });
  });
</script>

<div id="accordion">
  <h3><a href="#">Section 1</a></h3>
  <div>
    <ul>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </div>
  <h3><a href="#">Section 2</a></h3>
  <div>
    <ul>
      <li><a href="/help">Help</a></li>
      <li><a href="/faq">FAQ</a></li>
    </ul>
  </div>
</div>

Here we're going through all the page links in the navigation accordion, picking the one that matches the current URL, and applying an .active class to it, which you can then style differently with CSS.

---

An aside: another, probably better, way to accomplish the second part is to build the page with the .active class already applied to the appropriate link, but that assumes you have control over the backend and that you know how to do it. In fact, if that's the case, you could skip the whole navigationFilter thing and generate a <script> block to set the active option on the accordion to open the right section.

Solution 2

OK this issue has been bugging me for a while and thought I would post my solution to this problem. (I am a bit of a newbie with JQuery so....)

In my circumstance I have a master page that contains the JQuery script to handle the automation of the menu and I have several content pages that have different menus (I have a horizontal menu accross the page header and then the JQuery accordion handles the sub menu so to speak).

I added id tags to the menu header divs and then placed the following in the content placeholder of the content page.

    $(document).ready(function () {
        $('.active').next().hide().removeClass('active');
        $('#yourMenuHeaderIdTag).addClass('active').next().show();
     };

This works perfectly and it did make me wonder why I have struggled with this over the last week or so when the solution is so simple!

Comments

[Alex Sexton]

If you went with the hash change method described here, the following plugin is unmatched: benalman.com/projects/jquery-bbq-plugin - it will soon replace the jQuery history plugin which is terribly dated.

[Matt]

@Alex - nice! wasn't aware of that one.

[MelissaTA]

Thanks for the info - I'll see if I can get it to work with your solution or with the one from No Surprises (above) - fingers crossed!