jQuery tabs: How to avoid display of tabs while loading?

Question

I am using jQuery tabs for displaying certain lists. I was able to make the tabs work. Apparently, it displays all the content while it loads the tabs.

Is there a way that I can avoid the loading display?

Answer 1

For all the tabs, just give style="display: none;":

<div class="tab" style="display: none;">
  <!-- Tab Content -->
</div>

And if you are using the default jQuery UI tabs, also add this to your CSS:

.ui-tabs-hide {display: none;}

Answer 2

You can hide content with beforeLoad event and and show it after it being fully loaded.

Example :

$(function() {
    $("#tabs").tabs({

        /* before tab is loaded */
        beforeLoad: function(event, ui) {
            $('#content').hide();

        },
        /* tab is loaded */
        load: function(event, ui) {
            $('#content').show();
        }
    });
});

or simply as praveen kumar described :

.ui-tabs-hide {display: none;}