Problem getting tabs to work when using an accordian inside a tab

Problem getting tabs to work when using an accordian inside a tab

I'm using an accordian inside a tab and for some reason the tabs are failing to hide and show content. It all appears as one continuous page but no javascript errors/warnings are being reported and the tabs highlight when clicked as if they're activating.
The addition of the accordian is new and the tabs worked prior.
 
Is there a limitation to these working together?

Basics of the code are below
Any suggestion or help hugely appreciated as I'm just scratching my head now after running out of ideas

Thx
Brad

Using jQueryUI v1.8.0 (updated to 1.8.1 with same result) with lightness theme

  1. $(function() {

  3. $(".button").button();
        
    $("#tabs").tabs( {selected: <?= ($selected)?$selected :0 ?>});

    $("#accordion").accordion({ header: "h3",
                              collapsible: true,
                              active: false,
                               autoHeight: false
                              });







  4.       });
  5.  
  6. <div id="tabs" >
  7.     <ul >    
  8.     <li><a href="#products">Products</a></li>      
  9.     <li><a href="#other">Other</a></li>     
  10.     <li><a href="#other2">Another</a></li>       
  11.     </ul>  
  12.  </div>

  14.      <div id="products" >
        <a href="editproduct.php?action=new" class="button">Create a New Product</a>

  16. <div   id="accordion">  
  17.     
  18. <h3><a href="#">Category 2</h3>
          <div>
          <table  width="100%"  border="0" cellpadding="3" cellspacing="0"  >

  19.       <tr><td>Image here</td><td>Code here</td><td>Edit link here</td></tr>
  20.       </table>
  21.       </div>

  23. <h3><a href="#">Category 1</h3>
          <div>
          <table  width="100%"  border="0" cellpadding="3" cellspacing="0"  >

  24.       <tr><td>Image here</td><td>Code here</td><td>Edit link here</td></tr>
  25.       </table>
  26.       </div>

  28. </div>