Javinto: Show jQuery tabs promptly

Date: 2010-08-27 15:04

jQuery tabs are just fabulous!

But if you have a lot of content then you might see your tabs being built up when jQuery applies them.

Here's the solution. Just hide the tabs HTML element initially:

<div id="my_tabs" style="display:none;">

Then use the following jQuery Tabs Event to display them when they are ready:

$('#my_tabs').tabs({ 
  show: function(event, ui) 
  {jQ(event.target).not(':visible').show();}
});

By using jQuery's .not(:visible) filter method show() is executed only once.