JQUI Newb, Accordian unable to finish when appending..

JQUI Newb, Accordian unable to finish when appending..

Greetings,

I am a newb with Jquery UI.  Trying a side project that pulls in some JSON data, formats it, and displays it.

I have a working demo here (no JqueryUI):


I want to play with an accordian on the page.  Here is a demo:


My accordian Div is created in the DoM, and I have Jquery creating the content and appending it to the Div.  It appears jQueryUI is firing, and styling the accordian DIV, but perhaps not seeing the "appended content" because perhaps it doesn't exist yet?  Any suggestions?  Forgive me if I breach decorum here, I plead newbiness!

  2. <body>
  3. <header>
  4. <h1>State Jobs in Richland County,  SC</h1>
  5. </header>
  6. <div id="Accordion1"></div>
  7. <script>
  8.    
  9.        
  10.     $.ajax({
  11.             url: 'http://api.usa.gov/jobs/search.json?organization_ids=US-SC&size=100&query=Richland',
  12.             dataType: 'jsonp',
  13.             success:function (data) { 
  14. /*console.log(data)*/
  15. data.sort(function(a,b){
  16. return a.start_date.localeCompare(b.start_date)})
  17. data.reverse();
  18.             detChng = ["start",""];
  19. var i=0;
  20. var listid ="";
  21. var listid2=""; 
  22. var regres=""; 
  24.         $.each(data, function(index, element) {
  25. var re = /^.*(?=\/band|\/ band)/i
  26. var title =  element.position_title;
  27. var maxSal = element.maximum
  28. regres = title.match(re);
  29. if (regres !== null){
  30. title = regres;
  31. }
  33. detChng[1] = element.start_date;
  34. if (detChng[0] !== detChng[1]){
  35. i++;
  36. if (i !== 7){
  37. listid = "jobs" + i;
  38. listid2 = "#"+listid;
  39. /*console.log(i + " " +detChng[0] + "New!" + detChng[1] + " " + listid2);*/
  40. $('#Accordion1').append('<h3><a href="#">'+element.start_date+'</a></h3><div class="jobDatePanel" id="'+i+'"><ul id="'+ listid +'"></ul></div>');
  41. detChng[0] = detChng[1];
  42. }
  43. };

  47. if (maxSal > 70000) {
  48. $(listid2).append('<li class="higher"><a  href="' + element.url + '">' +title +'</a></li> ');
  49. } else {
  50. $(listid2).append('<li><a href="' + element.url + '">' + title +'</a></li> ');
  51. }
  52. return (i !== 7);
  53.             
  54.                           });   
  55.                              }
  56.                 });
  57.   
  58.         
  59.     
  60. </script>

  62. <script type="text/javascript">
  63. $(function() {
  65. $( "#Accordion1" ).accordion(); 
  66. console.log("Accordian Fired");
  67. });

  69. </script>

  71.  
  72. </body>