How to programmatically open jquery accordion content panel

Question

I want to extend the default behavior of the jquery accordion and add a NEXT button inside the content panels. When the user clicks NEXT button inside the content panel, the accordion should open the next item.

I was able to locate the next item like this $(this).parent().next() but having trouble triggering the actual action.

<div id="accordion">
   <h3><a href="#">Item 1</a></h3>
   <div>Item 1 content<br />
      <div onclick="$(this).parent().next().show();">NEXT</div>
   </div>
   <h3><a href="#">Item 2</a></h3>
   <div>Item 2 content<br />
   </div>
</div>

Answer 1

If this is the jQuery UI Accordion widget, you should be using it's built-in methods.

var $accordion = $("#accordion").accordion();
function openNextAccordionPanel() {
    var current = $accordion.accordion("option","active"),
        maximum = $accordion.find("h3").length,
        next = current+1 === maximum ? 0 : current+1;
    // $accordion.accordion("activate",next); // pre jQuery UI 1.10
    $accordion.accordion("option","active",next);
}

html:

<div onclick="openNextAccordionPanel();">NEXT</div>

Answer 2

My accordion has only one content div (0 index) and on postback I'm registering the script to open again the accordion after it's recreation ($("#accordion").accordion({ collapsible: true, active: true });$("#accordion").show();) to position layout where the user was before triggered the postback.

HTML:

<div id="accordion" style="display: none">
    <h3>ACCORDION TITLE</h3>
    <div class="col-lg-12" style="overflow: hidden">

Javascript function:

 $("#accordion").accordion({ active: 0 });

 $('.ui-accordion-content').css('height', 'auto');