Resetting a jQuery Accordion

Question

I have two accordions on one page. I would like it so that when one is clicked/activated the other accordion (if opened) will return to its default folded state.

I have tried to manually recreate the functionality but it is too buggy and eventually doesn't let me expand accordions.

My code:

$('#chicago-accordion').accordion({ autoHeight: false, collapsible: true, active:false, });
    $('#chicago-accordion h2').click(function () { 
       $('#ny-accordion .accordion-content').slideUp(); 
       $('#ny-accordion h2').removeClass("ui-state-active"); 
       $('#ny-accordion .accordion-content').removeClass("ui-accordion-content-active"); 
       $('#ny-accordion').accordion({ clearStyle:true, });

      });


$('#ny-accordion').accordion({ autoHeight: false, collapsible: true, active:false, });
    $('#ny-accordion h2').click(function () { 
       $('#chicago-accordion .accordion-content').slideUp();
       $('#chicago-accordion .accordion-content').removeClass("ui-accordion-content-active"); 
       $('#chicago-accordion h2').removeClass("ui-state-active"); 
       $('#chicago-accordion').accordion({ clearStyle:true, });
      });
      });

Answer 1

The simplies solution I have found for that problem is to destroy and recreate the accordion.

var options = {autoHeight: false, collapsible: true, active:false};

$('#ac1').accordion(options);
$('#ac2').accordion(options);

$('#ac1').click(function () {
    $('#ac2').accordion('destroy').accordion(options);
});

$('#ac2').click(function () {
    $('#ac1').accordion('destroy').accordion(options);
});