jQuery Forum

I have a tab set thus:

1. div id="TabDiv">
       <ul>
           <li><a href="#tab-1">{TAB Option='0'}</a></li>
           <li><a href="#tab-2">{TAB Option='1'}</a></li>
           <li><a href="#tab-3">{TAB Option='2'}</a></li>
           <li><a href="#tab-4">{TAB Option='3'}</a></li>
           <li><a href="#tab-5">{TAB Option='4'}</a></li>
           <li><a href="#tab-6">{TAB Option='5'}</a></li>
           <li><a href="#tab-7">{TAB Option='6'}</a></li>
           <li><a href="#tab-8">{TAB Option='7'}</a></li>
           <li><a href="#tab-9">{TEXT}Rates{/TEXT}</a></li>
       </ul>
   
       <div id="tab-1"><p>Tab1</p></div>
       <div id="tab-2"><p>Tab2</p></div>
       <div id="tab-3"><p>Tab3</p></div>
       <div id="tab-4"><p>Tab4</p></div>
       <div id="tab-5"><p>Tab5</p></div>
       <div id="tab-6"><p>Tab6</p></div>
       <div id="tab-7"><p>Tab7</p></div>
       <div id="tab-8"><p>Tab8</p></div>
       <div id="tab-9"><p>Tab9</p></div>
   
   </div>
   
   

I Initialise the tabs like this:

1. <script type="text/javascript">
   
       $( document ).ready( function( e )
       {
           $( '#TabDiv' ).tabs();
       } );
   </script>
   

But when the tabs initialise it inserts it's own divs containing the root page of my web site, and my divs are still visible, thus: (Showing only one tab)

1. <div id="TabDiv" class="ui-tabs ui-widget ui-widget-content ui-corner-all" style="visibility: visible;">
   <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">

   <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="ui-tabs-1" aria-labelledby="ui-id-2" aria-selected="true">

   <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="ui-tabs-2" aria-labelledby="ui-id-3" aria-selected="false">

   <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="ui-tabs-3" aria-labelledby="ui-id-4" aria-selected="false">

   <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="ui-tabs-4" aria-labelledby="ui-id-5" aria-selected="false">

   <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="ui-tabs-5" aria-labelledby="ui-id-6" aria-selected="false">

   <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="ui-tabs-6" aria-labelledby="ui-id-7" aria-selected="false">

   <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="ui-tabs-7" aria-labelledby="ui-id-8" aria-selected="false">

   <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="ui-tabs-8" aria-labelledby="ui-id-9" aria-selected="false">

   <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="ui-tabs-9" aria-labelledby="ui-id-10" aria-selected="false">

   </ul>
   <div id="ui-tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-live="polite" aria-labelledby="ui-id-2" role="tabpanel" aria-expanded="true" aria-hidden="false">

   <meta content="0;url=http://xxxxx.mobi/CookieTest.php" http-equiv="refresh">

   <noscript> <meta http-equiv="refresh" content="0;url=http://xxxxxxxxxx.mobi/NoJava.php" /> </noscript>

   </div>

and my tabs are unchanged:

1. <div id="tab-1">
   <p>Tab1</p>
   </div>
   <div id="tab-2">
   <div id="tab-3">
   <div id="tab-4">
   <div id="tab-5">
   <div id="tab-6">
   <div id="tab-7">
   <div id="tab-8">
   <div id="tab-9">

Does anyone know what is happening? I thought that it might be a timing problem on load, so I move all the script loading to just before the </body> tag but it didn't make ant difference.

Thanks in advance
Terry