Problem with tabs, not finding tab id's?. Inserting it's own divs.
I have a tab set thus:
- 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:
- <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)
- <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:
- <div id="tab-1">
</div>
<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