jquery accordion inside the jquery tabs

jquery accordion inside the jquery tabs

I'll just paste the code first, explain the problems later
header
<script type="text/javascript">
   $(function() {
      $(".tabs").tabs();
   });
   </script>
   
<script type="text/javascript">
   $(function() {
      $(".accordion").accordion();
   });
   </script>


html body

   <div class="tabs">
      <ul>
         <li><a href="#tabs-1">something</a></li>
         <li><a href="#tabs-2">something else</a></li>
         <li><a href="#tabs-3">something else too</a></li>
      </ul>

      <div id="tabs-1">
         <p>
            //random content
         </p>
      </div>
      
      <div id="tabs-2">   
         <p>
         <div class="accordion">
         
            <h3><a href="#">Some header</a></h3>
            <div>
               <p>
               // random text
               </p>
            </div>

            <h3><a href="#">Another header</a></h3>
            <div>
               <p>
               // random text again
               </p>
            </div>

            <h3><a href="#">Some header again</a></h3>
            <div>
               <p>
               // random text yet again
               </p>
            </div>

         </div>
         </p>
      </div>
      
      <div id="tabs-3">
         <p>
            //random content, nothing special here
   
         </p>
      </div>
   </div>


ok, so this is it

The problem is, accordion (inside the tab-2) doesn't work.
First I thought the problem was in nesting, but I think it's not.
if I put accordion outside tabs and nest it as many divs deep as i want, it still works.
But when I insert the code for accordion inside the jquery tabs, it's all over. I get accordion displayed, but when I click it, nothing happens. in firefox i get some slides up down, but no content is displayed. in IE I click just 1 tab, slids up and accordion completely freezes.

I got the code here
http://jqueryui.com/demos/accordion/

Any suggestions? thanks in advance