jQuery UI tabs loading first as <ul> then as tabs

user_99401 0
Viewed 19085

I'm using jQuery UI and the tab control on a series of pages. It seems like, when loading a page, the tabs initially load as a simple list, then they jump to the tabstrip.

When I initially load the page I get this: alt text

Then, after a few seconds it switches over to this (the way is should be): alt text

Any idea why this is happening? Do I need to load the .js and/or .css files in a particular order? Or, is there a way to hide the initial list and only display the tabs once they are 'loaded'?

jquery-ui
9 Answers

The solution that worked for me was to set the display style property to none for the div element that contains the tabs and then call the show() method after the tabs() method.

<script>
  $( function() {
    $( "#tabs" ).tabs();
    $( "#tabs" ).show();
  } );
</script>

<div class="tabbody" id="tabs" style="display: none;">
    <!-- tab html -->
</div>
user_44840120
Related