Creating dynamic accordion from a custom list using jQuery and jQuery UI in SharePoint not displaying as should

Question

I am trying to dynamically build accordion from list of items returned using JavaScript, jQuery and jQuery UI. Below is my code:

<div>
Search List <input type="text" id="autobox"><br>
<select id="Building"> <option value="null"></option><option value="HQ">Headquarters Building</option> <option value="DE">DE</option><option value="GV">Gv</option><option value="Ts">Ts</option></select> 
<select id="Fl"> <option></option><option>1</option> <option value="F2">2</option><option value="F3">3</option><option value="F4">4</option></select> 
<select id="size"> <option></option><option>Small(1-4)</option> <option value="Medium">Medium(5-8)</option> <option value="Large">Large(>8)</option></select> 
<div id="button"><input onclick="retrieveListItems()" type="button" value="Filter List!"/></div>
</div>
<div id="accordion">
</div>


<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

<script type="text/javascript">

jQuery(function() {
jQuery( "#accordion" ).accordion();
  });

var siteUrl = '/'; 

ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");



 function retrieveListItems() {

 //create global variables of ids of selected dropdown list value
 window.BFB=document.getElementById("Building");
 window.BF= window.BFB.options[window.BFB.selectedIndex].text;


window.Fl=document.getElementById("Fl");
window.Flr= window.Fl.options[window.Fl.selectedIndex].text;



window.S=document.getElementById("size");
window.Si= window.S.options[window.S.selectedIndex].text;


var clientContext = new SP.ClientContext(siteUrl);

var oList = clientContext.get_web().get_lists().getByTitle('Rooms');

var camlQuery = new SP.CamlQuery(); //instantiate query obj

//display based on filters

if(window.BF =='' && window.Flr == '' && window.Si ==''){

camlQuery.set_viewXml('<View><Query><OrderBy><FieldRef Name="Title"/></OrderBy> </Query></View>'); 


}else{

    camlQuery.set_viewXml('<View><Query><Where><And><And><Eq><FieldRef Name="Building" /><Value Type="Choice">'+ window.BF +'</Value></Eq><Eq><FieldRef Name="Floor" /><Value Type="Choice">'+window.Flr+'</Value></Eq></And><Eq><FieldRef Name="General_x0020_Size" /><Value Type="Calculated">'+window.Si+'</Value></Eq></And></Where></Query></View>');
} 

this.collListItem = oList.getItems(camlQuery);


clientContext.load(collListItem);


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




}

function onQuerySucceeded(sender, args) {

var listItemInfo = '';

var listItemEnumerator = collListItem.getEnumerator();

while (listItemEnumerator.moveNext()) {
     var oListItem = listItemEnumerator.get_current();


var h3 = '<h3>' + oListItem.get_item('Title') + '</h3>';
    var div = '<div>' + oListItem.get_item('Floor') + '</div>';
    var content = $(h3 + div);
    content.appendTo("#accordion").show();

//alert(header);

}


$("#accordion").accordion();

    //alert (count);        
}


function onQueryFailed(sender, args) {

alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}


jQuery( document ).ready(function() {
    //alert( "document loaded" );
});



</script>

The output is not displayed as an Accordion but as a normal html output. Does any one have any suggestions to how I can get the accordion displaying like expected?

Thanks.

Answer 1

Found the solution. All it took was replacing this bit of code:

var h3 = '<h3>' + oListItem.get_item('Title') + '</h3>';
var div = '<div>' + oListItem.get_item('Floor') + '</div>';
var content = $(h3 + div);
content.appendTo("#accordion").show();

with this bit of code

var newDiv = "<h3> " +oListItem.get_item('Title').toString() +"  </h3><div> <p> Building  :  " +oListItem.get_item('Building').toString()+" </p> </br>
<p> Floor :" +oListItem.get_item('Floor').toString()+" </p></br><p> Floor :"  +oListItem.get_item('Floor').toString()+" </p></br></div>";
    $("#accordion").append(newDiv)
    $("#accordion").accordion("refresh"); 

Thanks to this stackoverflow question