I'm trying to implement jQuery UI accordion to collapse my fields when clicked. But it isn't working. Can someone point me in the right direction please?
$(function() {
$( "#accordion" ).accordion({
collapsible: true
});
});
Asked
Active
Viewed 463 times
-1
serenesat
- 4,611
- 10
- 37
- 53
Kyriediculous
- 99
- 2
- 12
-
I don't know what you want but if you comment the accordion on `$(function()`, and then put that code after the `for` in the `success` callback, it will work. http://codepen.io/anon/pen/MbvmBN – Jorge F Nov 26 '16 at 20:24
-
Hey thanks , you should post as reply so I can upvote! So I didn't need a function after all? just select the #accordion element and apply the method to it? Because the function on top is now an empty function. I found a little 'bug' though. When I click a link to go outside of my page jQuery UI breaks until a hard refresh. I should go check a video on jQuery UI maybe, it looked way more simple on the docs. Thanks again ! – Kyriediculous Nov 27 '16 at 13:30
-
Improve formatting. – jordiburgos Nov 27 '16 at 20:22
1 Answers
1
I didn't catch that the last time, you have a $(document).ready() and you have a $(function() inside the $(document).ready(), they are the same but abbreviated:
$(document).ready(function() VS $(function(){
And because you are creating the accordion after the elements are created with javascript, you need to call the accordion method because it's new content.
$.ajax({
type:"GET",
url:apiURL,
dataType:"json",
async:false,
success: function(response){
console.log(response);
searchTitles=response[1];
searchDescription=response[2];
searchLink=response[3];
for (var i = 0; i<searchTitles.length; i++) {
$(".results").prepend("<h3>"+searchTitles[i] +"</h3>" + "<div> <p>"+searchDescription[i]+"</p>" + "<a target='blank' class='btn btn-warning' href='"+searchLink[i]+"'>More</a></div>");
}
//After the new content, generate the accordion
$( "#accordion" ).accordion({
collapsible: true
});
}
});
