Question

I am using jQuery UI Tabs with Ajax. We have content in the tabs that display loading animations when a tab is loaded before the content is.

However, when the page is loaded, you can see the content below the unrendered tabs before they have been jQuerified.

My question is, is there a way to hide these tabs content before they have been rendered into tabs and show the content after? Adding visibility: hidden or display: none causes the content to not show up.

    <div id="ui-tabs-1" style="display: none;">
        <!-- Default Content -->
    </div>
    <div id="ui-tabs-2" style="display: none;">
        <!-- Default Content -->
    </div>

Answer 1

You can use display:none on the tab contents that you don’t want to see before rendering the tabs and show them all in the create call back function.

See my DEMO here.

1. Added class tab_content to those tabs that will be display:none
2. Added code $('.tabs_content').show(); On tab->create call back