JQuery Accordion doesn't works

Question

I read a list in SharePoint 2013 by using a JavaScript and put the entries in a Accordion structure. I get the values but the Accordion effect isn't working. Why? If I try it without my List reading script it is working fine.

<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function (){
 $('#accordion').accordion();
});
</script>

<script type="text/javascript">

SP.SOD.executeOrDelayUntilScriptLoaded(connectToList, 'sp.js');  
var collListItem;  

function connectToList() {  
   var clientContext = new SP.ClientContext.get_current(); 
   var oList = clientContext.get_web().get_lists().getByTitle('Visitors');
   var camlQuery = new SP.CamlQuery();  

   camlQuery.set_viewXml('<View></View>');  
   this.collListItem = oList.getItems(camlQuery);  

   clientContext.load(collListItem);  

   clientContext.executeQueryAsync(  
     Function.createDelegate(this, this.onQuerySucceeded),   
     Function.createDelegate(this, this.onQueryFailed)  
   );     
 }     

 function onQuerySucceeded()   
   {
     var a_html = "";
     var listItemEnumerator = collListItem.getEnumerator(); 

     while (listItemEnumerator.moveNext()) {  
       oListItem = listItemEnumerator.get_current();  
       a_html += '<h3>' + oListItem.get_item('Title') + '</h3>';
       a_html += '<div><p>' + oListItem.get_item('Answer') + '</p></div>';
     } 

     document.getElementById("accordion").innerHTML = a_html;
 }

 function onQueryFailed()  
   {  
     console.log("error");  
     alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());  
   } 

</script> 

<div id="accordion"></div>

Answer 1

Most likely it is because you are setting up the accordion functionality with $('#accordion').accordion() before all the content is there.

It takes some time (not much, but some) to retrieve the list items and loop through them and insert your <h3> and <div> elements, and you are setting up the accordion before it is ready.

Try removing the $(document).ready() section and add $('#accordion').accordion() at the end of your onQuerySucceeded function:

    document.getElementById("accordion").innerHTML = a_html;
    $('#accordion').accordion();
}