UI Tabs and Multiple Accordion

UI Tabs and Multiple Accordion

I am having difficulties using an accordion for each tab. For the first tab 'Session 1' the accordion works fine, however, for the 2nd tab and the 2nd accordion 'Session 2' the text within the body does not show. 

i.e The accordion is created, but when you select the accordion header none of the text appears after it expands.


Here is the code:

<script language="javascript" type="text/javascript">
      jQuery(document).ready(function(){
              $("#tabs").tabs();
      $("#accordion").accordion();
      $("#accordion2").accordion();
      });
</script>

 <div id="tabs">
<ul>
<li><a href="#Session1">Session 1</a></li>
<li><a href="#Session2">Session 2</a></li>
</ul>
<div id="Session1">
Session 1
<div id="accordion">
<h3><a href="#">Start</a></h3>
<div>
<p>Test</p>
</div>
<h3><a href="#">60 Seconds</a></h3>
<div>
<p>Test</p>
</div>
</div>
</div>
<div id="Session2">
Session 2
<div id="accordion2">
<h3><a href="#">Start</a></h3>
<div>
<p>Test</p>
</div>
<h3><a href="#">60 Seconds</a></h3>
<div>
<p>Test</p>
</div>
</div>
</div>
</div>