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 AJAX after a button click. The HTML for the accordion is showing up in the manner that it should, but the accordion "method" isn't being executed to modify the content into an accordion.

Imports:

<link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />
<link rel="stylesheet" href="theme/supersized.shutter.css" type="text/css" media"screen" />
<link rel="stylesheet" href="css/NewSite.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/resources/demos/style.css">    
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="/development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/development-bundle/ui/jquery.ui.accordion.js"></script>
<script type="text/javascript" src="js/supersized.3.2.7.min.js"></script>
<script type="text/javascript" src="theme/supersized.shutter.min.js"></script>
<script type="text/javascript" src="js/jquery.ModalWindow.js"></script>

Accordion Call in the JQuery:

    <script type="text/javascript">
    jQuery(document).on('click', '.subMenuItem', function()
    {   
        event.preventDefault(); 
        var subMenuItemID = '#' + $(this).attr('id');
        var menuItemContent = $('#MenuItemContent');

        var mainCategory = $(this).attr('id').split('xx')[0];
        var subCategory = $(this).attr('id').split('xx')[1];
        $.ajax({                                                          
                  url: '/php/SubMenuItemContent.php',         
                  data: {
                          MainCategory: mainCategory,
                          SubCategory: subCategory
                        },

                  success: function(result) {
                      menuItemContent.html(result);  
                  }
                });

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

The resultant Markup from the AJAX is correct, but the accordion doesnt display properly, it displays as a normal block of H3's and divs.

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.