combine datepicker and accordion

combine datepicker and accordion

i want to make a accordion with input fields in it like this:

<h4><a href="#">Lieferung 1 </a></h4>
   <div>
   <input type="text" name="lieferdatum-1" id="lieferdatum-1" value="01.01.2009"  onclick="TestAction('lieferdatum-1');"/>
   </div>

<h4><a href="#">Lieferung 2 </a></h4>
   <div>
   <input type="text" name="lieferdatum-2" id="lieferdatum-2" value="05.06.2009"  onclick="TestAction('lieferdatum-2');"/>
   </div>
<h4><a href="#">Lieferung 3 </a></h4>
   <div>
   <input type="text" name="lieferdatum-3" id="lieferdatum-3" value="07.08.2009"  onclick="TestAction('lieferdatum-3');"/>
   </div>


The accordion works fine, ther is no problem.


The JavaScript for the function "TestAction" is the follow:
$(document).ready(function(){

      function TestAction(input) {
      $('#'+input).datepicker();
      }
      
      
  });


The strange thing is, when I click on an input field and check with Firebug what jQuery is doing, I can see near at the end of the page the following code:
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible" style="position: absolute; top: 505px; left: 556.5px; display: none;">


The next strange thing is, after i checked that and switch to an other tab in FireFox (example: google.com) and switch back, the datepicker shows correctly at the correct position.

My question, is a combination datepicker and accordion possible and if yes what am I doing wrong?