CODEWITHSUNDEEP
javascriptjqueryjquery-uitabsjquery-ui-tabs
Barry Chapman
Barry Chapman

Reputation: 6780

How to hide jQueryUI Tabs prior to rendering?

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>

Upvotes: 0

Views: 4560

Answers (1)

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

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

Upvotes: 2

Related Questions