Reset jQuery Accordion

Question

I have two accordions on one page. I would like that when pressed / activated, another accordion (if open) will return to its folded state by default.

I tried to manually recreate the functionality, but it is too buggy and ultimately does not allow me to expand the accordions.

My code is:

$('#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 simplification solution I found for this 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);
});

Answer 2

Here I use reset single accordion:

$ ('u-state-active.ui-accordion-header.') Trigger ('click') ;.

To reset specific, you can use

$( "--active.ui--header.myclass1'.) ('click');.

$(" --active.ui--header.myclass2'.) ('click');.

Answer 3

This will reset your accordion without the selected tab. Resetting with addClass / removeClass / attr will make your accordion look visual, but it takes 2 clicks to activate the previous selected tab.

$('.yourAccordion').accordion({
    active: false
});

thanks