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);
})

Answer 2

In versions of JQuery UI 1.10 or greater the .activate function has been deprecated in favour of using the 'option' method so an alternative approach using the previous answer and would be:

$("#button").click(function(){
    var index = $("#accordion").accordion('option','active');
    var total = $("#accordion").children('div').length;
    index++;

    // include restart same as previous answer     
    if (index >= total) {
        index = 0;
    }

    $("#accordion").accordion("option", "active", index);

}