jquery accordion, opening a box based on href

Question

I am trying to open an accordion based on a link i send to the page

This is my url

services.html#branding

I am using the following code in the head:

 <script type="text/javascript">
      $(document).ready(function(){
     $('#accordion').accordion({collapsible: true, animated: 'slide', autoHeight: false, navigation: true, active : 'false'});
      });
  </script>

And the accordion looks like:

<div id="accordion">
<h3 id="branding"><a href="#">Branding</a></h3>
<div>
<p>Does your business have a</p>
</div>
<h3><a href="#print">Print</a></h3>
<div>
<p>Brochures</a></p>
</div>
</div>

Any help would be greatly appreciated... http://docs.jquery.com/UI/Accordion

Answer 1

The bad news is that the accordion plugin is currently broken (as of 1.7.2, which you can see from ticket #4653). The good news is that it's fixed, and you can already grab the latest version here - but beware, it isn't a stable release yet!

If you use the 1.8.1 code, the navigation feature works again. Setting navigation: true will direct accordion to automatically open the correct panel when you browse to a url that matches your navigation fragment (so that your example would work: services.html#branding).

I think you also want to add the missing identifier to your branding anchor tag, like this:

<h3 id="branding"><a href="#branding">Branding</a></h3>

Finally, you may want to use the technique described here to update your page's url to reflect which accordion panel has been clicked without reloading your page.

Answer 2

Oh I see Jeff reported that the current UI version is broken, but I actually had a solution using the current version...

HTML

<div id="accordion">
 <h3><a href="#branding">Branding</a></h3>
 <div>
  <p>Does your business have a</p>
 </div>
 <h3><a href="#print">Print</a></h3>
  <div>
  <p>Brochures</p>
  </div>
</div>

Script

$(document).ready(function(){
 $('#accordion').accordion({ collapsible: true, animated: 'slide', autoHeight: false, navigation: true });

 // open content that matches the hash
 var hash = window.location.hash;
 var thash = hash.substring(hash.lastIndexOf('#'), hash.length);
 $('#accordion').find('a[href*='+ thash + ']').closest('h3').trigger('click');
})

I used a[href$=...] originally, but changed it to a[href*=...]... either will work