Choosing attribute in frontend - jQuery UI not working

[GMTeams]

Contao 3.5.30
Isotope 2.4.4

I have an accordion and tabs running on my product detail site using jQuery UI.

It works fine, but when I'm choosing an attribute on a radio button, the accordion and tabs are not working anymore.

Code before choosing an attribute:
<div class="toggler ui-accordion-header ui-state-default ui-corner-all ui-accordion-icons" role="tab" id="ui-id-1" aria-controls="ui-id-2" aria-selected="false" aria-expanded="false" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>Größentabelle</div>

Code after choosing an attribute:
<div class="toggler">Größentabelle</div>

It seems that jQuery UI is not working anymore. This is the snippet for the accordion:
<script> (function($) { $(document).ready(function() { $(document).accordion({ // Put custom options here heightStyle: 'content', header: 'div.toggler', collapsible: true, active:false, create: function(event, ui) { ui.header.addClass('active'); $('div.toggler').attr('tabindex', 0); }, activate: function(event, ui) { ui.newHeader.addClass('active'); ui.oldHeader.removeClass('active'); $('div.toggler').attr('tabindex', 0); } }); }); })(jQuery); </script>

My guess is that the script is loading on document.ready, but when an attribute is choosen, there comes another "event" instead of document.ready and this causes the problem?

[GMTeams]

Any suggestions on this?

I tried MANY possibilities, e.g. like placing the script manually on various places in the HTML-Template. Or copy it into the local jQuery Script, so that the loading of jQuery causes the loading of jQuery UI too, but not even that helped me out.

But now my ideas are over, would be nice if anybody has a hint for me :)

[mirkogleibe]

Problem is, that with chosing an option, there will be an ajax reload of the isotope product div, normally starting with something like <div class="mod_iso_productlist... With that your js could not start cause of $(document).ready happend when the whole page loaded and not a part of it.

First you need to add your accordion to a single js function. something like reAccordion()
then you need to get the ajax event. maybe there are better solutions out there, but I used the mutationObserver.

$.fn.change = function(cb, e) { e = e || { subtree:true, childList:true, characterData:true }; $(this).each(function() { function callback(changes) { cb.call(node, changes, this); } var node = this; (new MutationObserver(callback)).observe(node, e); }); };

then you can give your mod_article of the product a css class like "watcher"

with
$('.watcher').change(function(changes, observer) { reAccordion(); });

You can reload the Accordion js after the ajax is done...

Maybe this helped you a bit.

[GMTeams]

Thx very much mirkogleibe that worked for me.
Have a good week.