Combining jQuery accordion with xml loop

Combining jQuery accordion with xml loop

I'm trying to put an xml loop in a jQuery UI accordion, but it's only the first loop that gets displayed in the accordion, the rest of the loops goes outside for some reason.

How can I make it work with each loop?

This is the accordion script (I've taken out the xml url and foreach stuff for simplicity)

  1.   $(function() {
  2. $( "#accordion" ).accordion({
  3.     heightStyle: "content",
  4.     collapsible: true,
  5.     active: false,
  6.     activate: function( event, ui ) {
  7.       if(!$.isEmptyObject(ui.newHeader.offset())) {
  8.       $('html:not(:animated), body:not(:animated)').animate({ scrollTop: ui.newHeader.offset().top }, 'slow');
  9.       }
  10.     }
  11.   });
  12. });


And this is what is supposed to be looped

  1. $x = 0;
  2. while($x <= 20) {
  3. <div id='accordion'>
  4.   <div class='accord-header'>
  5.     <div class='titellinie'>$stilling - $firma</div>
  6.   </div>
  7.   <div class='accord-content'>
  8.     <div class='main-wrap'>
  9.       <div class='banner'><img src='$banner'></div>
  10.       <div class='main-content'>$stilling<br>$stillingsbeskrivelse</div>
  11.   </div>
  12.   <div class='sidebar-wrap'>
  13.     <div class='sidebar-content'><img src='$kundelogo'>$intro</div>
  14.   </div> 
  15.   </div>
  16. </div>";
  17. $x++;
  18. }


I've used a different type of jQuery accordion, which looped perfectly, but I was unable to make it scroll like i wanted to, when the accordion opened up, hence the switch to jQuery UI.

The first accordion, which works, is set up the same way as my non-working accordion, which is baffling me a bit.

Working accordion, can be seen here http://kreuzwerk.dk/dev/hrmanxmlacc/

Non-working accordion is here: http://kreuzwerk.dk/dev/hr-manager-xml-acc-alt/