Trigger jquery accordion menu by an event?

Question

Is it possible to open the next panel in a jquery accordion menu through a seperate button onclick event? That is instead of clicking the heading to open another panel, use a button not connected to the accordion.

Answer 1

Yes, just call activate on the accordion like this:

$("#myaccordion").accordion("activate", 1 );

Where 1 is the index you want to open.

You can get the current zero-based index of the active panel by calling:

var index = $("#myaccordion").accordion('option','active');

So, taking both these items together, we can open the next item on a click:

$("#mybutton").click(function(e){
  e.preventDefault();
  var acc   = $("#myaccordion"),
      index = acc.accordion('option','active'),
      total = acc.children('div').length,
      nxt   = index + 1;

  if (nxt >= total) {
     nxt = 0; // Loop around to the first item
  }

  acc.accordion('activate', nxt);
})