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="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>

  ```