Problem with tabs, not finding tab id's?. Inserting it's own divs.

Problem with tabs, not finding tab id's?. Inserting it's own divs.

I have a tab set thus:

  1. div id="TabDiv">
            <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>

        <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>


I Initialise the tabs like this:
  1. <script type="text/javascript">

        $( document ).ready( function( e )
            $( '#TabDiv' ).tabs();
        } );

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;">
and my tabs are unchanged:

  1. <div id="tab-1">
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