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').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>