jQuery Accordion - How to pass state using URL's?

Question

I am trying to maintain state in my JQuery accordion menu, I'd like to avoid any server-side processing or unnecessary variable passing if possible.

Here is my code:

<ul class="accordion">
  <li>
    <a href="#" class="opener">Autos</a>
    <div class="slide">
      <ul>
        <li><a href="/cars">Cars</a></li>
         <li><a href="/motobikes">Motorbikes</a></li>
      </ul>
    </div>
  </li>

  <li>
    <a href="#" class="opener">Pets</a>
    <div class="slide">
      <ul>
        <li><a href="/cats">Cats</a></li>
        <li><a href="/dogs">Dogs</a></li>
      </ul>
    </div>
  </li>
</ul>


<script type="text/javascript">
  $(document).ready(function() {
    var accordion = $('ul.accordion');
    var show_link = '/cats';
    active = FIND_SECTION_TO_OPEN_BASED_ON_URL;
    accordion.accordion('activate', active );
  });
</script>

By hardcoding

accordion.accordion('activate', 0 );

I can have the "Autos" menu open when the page loads, but I want to be about to dynamically find which menu or ul to open based on the URL, I'm pretty new to JavaScript and where I am stuck is on this line:

active = FIND_SECTION_TO_OPEN_BASED_ON_URL.to_int;

Does anyone know how to implement this?

(I've done a lot of research on this and have not been able to find a solution which works here)

Answer 1

You can use the location.hash property to get the menu to open from the URL. You would pass the menu number in a hash tag like this:

URL: http://www.domainname.com/page.html#1

And then use the JS to get it and pass it to the script:

<script type="text/javascript">
  $(document).ready(function() {
    var accordion = $('ul.accordion');
    var show_link = '/cats';
    var active = window.locatioh.hash.replace("#", "");
    accordion.accordion('activate', active );
  });
</script>

Answer 2

First off you need to pass the current page via the anchor like so (What you pass doesn't really matter, just that it's unique):

<a href="#autos" class="opener">Autos</a>
...
<a href="#pets" class="opener">Pets</a>

Then you can base the index off of the resultant hash

active = $(".opener[href='"+location.hash+"']").parents("li").index();

Answer 3

My new library does this. Check it out .

Answer 4

Here's what I did for my page. My URLS are in the format site.com/#page/accordion/tab . I also made it so that when the user clicks on an accordion or tab, the hash changes. That way if you were to navigate to the URL somewhere else, you would go to the accordion you were just looking at.

I did run into a problem though with the hashchange event. Since it's a hash, if the user goes from site.com/#page/accordion-one to site.com/#page/accordion-two , that's a hashchange not a pageload, so I put the below code in a function and bound it to the hashchange event. Problem is I have to unbind it when I change the hash in the below code, and I'm having some trouble with it still catching the hashchange event when I rebind it. See my question here .

var hash = window.location.hash;
hash = hash.replace(/#/, "");
hash = hash.split("/");

if(typeof hash[1] !== 'undefined'){
    //select campus accordion
    //first disable the animation and the function that changes the hash:
    $("#accordion").accordion("option", "animated", false);
    $('.ui-accordion').unbind('accordionchangestart');
    $("#accordion").accordion("activate", $("#accordion-"+hash[1]));
    $("#accordion").accordion("option", "animated", 'slide');
    $('.ui-accordion').bind('accordionchangestart', function(event, ui) {
        var hash = window.location.hash;
        hash = hash.replace(/#/, "");
        hash = hash.split("/");

        var name = $(ui.newHeader).attr("name");

        var val = hash[0]+"/"+name;
        sessionStorage.setItem("accordion", val);
        hashChange(val);
    });
}
if(typeof hash[2] !== 'undefined'){
    //select tab
    $(".ui-tabs").tabs("select", "#tabs-"+hash[2] );
}