Creating External Triggers for JQuery UI Accordion

Creating External Triggers for JQuery UI Accordion

I'm working on a website that uses the most recent version of the jQuery UI accordion. The accordion works perfectly for the content area of my page.


I added a a vertical navigation to the left side of the page that is outside of the accordion element. I would like to add some links in the left navigation, one for each panel of the accordion. So, it might look something like this...


  • Accordion Panel 1
  • Accordion Panel 2
  • Accordion Panel 3
  • Accordion Panel 4
I would like those links when clicked to each open the corresponding accordion panel. So for instance, when you click on 'Accordion Panel 2' it opens up the number two panel on the accordion.


By adding this code to each link I was able to get it to work... kind of.

  1. <a href='#' onclick='$( "#accordion" ).accordion( "option", "active", 1 );'>test</a>

The problem is that the code above makes it so when each link is clicked it opens the correct panel, however, when you click the link again it doesn't close the panel. So, basically what I am wondering is what do I need to do to this code in order to make it also close the panel when clicked again?

Thanks in advance!