JQuery UI Accordion not working with AJAX loaded content

Question

I am attempting to dynamically load a page of product info, that has an accordion menu for the user to browse. I bring in the content for the accordion dynamically using AJA

Answer 1

Two things, first you have an extra } at the end of your script.

Second, the accordion content isn't loaded correctly because the accordion DOM elements are not yet loaded (they are loaded in your AJAX call), so put the following your SubMenuItemContent.php file:

<script>
jQuery(document).ready(function($) {   

 $('.accordion').accordion({
  heightStyle: "content",
  active: false,
  collapsible: true
 });

})
</script>

to init the accordion that is loaded.

Alternatively you could try moving the accordion() call inside your success callback like so:

success: function(result) {
 menuItemContent.html(result);
 $('.accordion').accordion({
  heightStyle: "content",
  active: false,
  collapsible: true
 });
}

But I've had more success with the previous method, for whatever reason.