Hash-Based Navigation with Accordion Panels?

Hash-Based Navigation with Accordion Panels?

I am using jQuery UI accordion panels, and I want hash-based navigation so that users can bookmark the URL and return to the same section later. That is, if they click on an entry, the URL should change to something like http://host/page.html#entryN, and if they bookmark http://host/page.html#entryN and go to it later, it should go to the page, then open up accordion panel entry N, and scroll down so that entry is visible. I also want to make sure that all accordion sections show up when the user prints the page, rather than just the currently open section.

I have all of these features working, but I strongly suspect that I don't properly understand the "navigation" option, and that there would be a much simpler solution if I understood it. I also wonder if my hack for printing is the best approach. Here is what I did:

1) General setup.
<div id="accordion-panel-div">

<h2><a class="accordionLink" href="#p1" name="p1">Panel 1</a></h2>
<div>
  <p>Content for first panel.</p>
  <p>Foo, bar, baz.</p><p>Yadda, yadda, yadda.</p>
</div>

... <!-- Similar code for other accordion panels -->
</div>

I repeated the same value for name as for href so that the browser would scroll down when the URL contained the hash #p1.

2) To change the URL when users open an accordion entry:
$(function() {
   $(".accordionLink").click(function(event){ window.location.hash=this.hash; });
   ...
});

3) To open the appropriate panel (and scroll) for an incoming URL of http://host/page.html#p1 [Note that this is the part where I think I have done something much too complicated, and the "navigation" option would help if I only understood how to use it.]

var coreservlets = {};
coreservlets.accordionLinkClass = "accordionLink";
coreservlets.accordionDivClass = "accordion-div";

coreservlets.findAccordionSelectionByHash = function(linkClass, divId) {
  var accordionLinkPattern = "#" + divId + " a." + linkClass;
  coreservlets.accordionSelection = -1;
  $(accordionLinkPattern).each(function(index) {
    if (("#" + this.href.split("#")[1]) == window.location.hash) {
      coreservlets.accordionSelection = index;
      return(false);
    }
  });
  if (coreservlets.accordionSelection == -1) {
    coreservlets.accordionSelection = false;
  }
};

$(function() {
    ...
    coreservlets.findAccordionSelectionByHash("accordionLink",
                                              "accordion-panel-div");
    $("#accordion-panel-div").accordion({ collapsible: true,
                                          active: coreservlets.accordionSelection });
});

4) To make sure all sections show up on printouts, not just the current open section. [This is in the print style sheet.]

.ui-accordion-content { display: block !important }


Since it strikes me that much of this behavior would commonly be desired, I strongly suspect I am doing something much more complicated than necessary. Anyone want to clue me in as to how to simplify this?

Thanks!

        - Marty

-----
Java EE, Ajax, and GWT Training