¿Activar el menú de acordeón jquery por evento?

Question

¿Es posible abrir el siguiente panel en un menú de acordeón jquery a través de un botón separado al hacer clic en evento? Es decir, en lugar de hacer clic en el encabezado para abrir otro panel, use un botón que no esté conectado al acordeón.

Answer 1

Sí, simplemente llame activate en el acordeón como esto:

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

Dónde 1 es el índice que desea abrir.

Usted puede obtener el índice de base cero de corriente del panel activo llamando:

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

Por lo tanto, teniendo estos dos elementos juntos, podemos abrir el siguiente elemento en un clic:

$("#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

En las versiones de JQuery UI 1.10 o superior, la función .activate ha quedado obsoleta a favor de utilizar el método 'opción' por lo que un enfoque alternativo usando la respuesta anterior sería:

$("#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); 

}