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

Question

Hi everyone,

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!

Answer 1

This is one of the pitfalls of JavaScript navigated websites - your URL doesn't actually point to your page, like a traditional page. It makes it difficult to use normal browser features like bookmarks and the back button.

One solution some people seem to be using these days is to store this information after the hash part of the url.

http://www.mysite.com/path/index.html#jsPageIndicator

By storing information in place of "jsPageIndicator" above, you can then parse it with the JavaScript after $(document).ready(), and have it tell you what page should be loaded. In your case this might be something simple, such as the index of the accordion that has the focus (should be open).

You might also want to look at the jQuery history plugin.

Or, as Alex points out below, benalman.com/projects/jquery-bbq-plugin

Answer 2

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.

Answer 3

You can see here : http://blog.evaria.com/wp-content/themes/blogvaria/jquery/index-multi.php

Answer 4

None of the above worked for me. The documentation for jquery ui is spare, and the source code didn't leave many clues for somebody not well versed in jquery.

I used the accordion in a sidebar, and the links in each content section were inside tables, so I had to keep track of my HTML-structure (a fragile thing), and do this right after creation of the accordion:

        $("#sidebar td").each(function () {
            var td = $(this);
            var a = td[0].firstChild;
            if (a.href == location.href) {
                $("#sidebar").accordion("activate",
                        td.parent().parent().parent().parent().prev());
            }
        });

Yes, horrific, backing up a tr, tbody, table, and div, but it worked, and in our case we haven't changed the HTML-structure in months.

Answer 5

I have created this one:

http://sarfraznawaz.wordpress.com/2010/03/09/creating-stylish-sliding-menu-with-jquery/

Answer 6

Here is an example that worked for me:

http://stackoverflow.com/questions/2296945/need-help-with-jquery-ui-accordion-navigationfilter-option/2702486#2702486

Answer 7

I want to ask a quetion? How can I write a code for accordion jquery?where all the div should be in separate tr tag