title: How to avoiding FOUC on dynamically generated jQuery UI tabs
body: <p>I dynamically create multiple tabs using jQUery UI tabs -- the tabs are created using a <code>foreach</code> on a view page as follows (some codeigniter markup):</p>
  
  <pre><code>&lt;script type="text/javascript"&gt; 
  $(function($) {
     $('#plants').tabs('paging', { follow: true } );
  });
  &lt;/script&gt;
  
  &lt;div id="plants"&gt;
      &lt;ul&gt;
      &lt;?php foreach ($plants as $row):
        echo '&lt;li&gt;&lt;a href="#tabs-'.$row-&gt;plant_id.'"&gt;'.$row-&gt;plant_name.'&lt;/a&gt;&lt;/li&gt;';
        endforeach; ?&gt;
      &lt;/ul&gt;
      &lt;?php if (!empty($plants)):
            foreach ($plants as $row): ?&gt;
          &lt;div class="block" id="tabs-&lt;?php echo $row-&gt;pet_id; ?&gt;"&gt;
               &lt;div class="grid_6"&gt;
                              &lt;p&gt;
                  &lt;?php echo '&lt;h1&gt;'.$row-&gt;pet_name.'&lt;/h1&gt;'; ?&gt;
                                  etc...
                  &lt;/p&gt;
                       &lt;/div&gt;
                   &lt;/div&gt;
                 &lt;?php
                 endforeach;
                 else:
                 endif; ?&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As above the tabs are formed fine. Problem is the good ol' Flash Of Unstyled Content. It happens on IE, Chrome, FF.</p>
  
  <p>I've tried the CSS option on the jQuery documentation, didn't work.</p>
  
  <p>There's a simple JS that inserts a CSS style on <code>&lt;head&gt;</code> and then applies a <code>{display:none}</code> on a specific <code>id</code> -- but that makes my panels disappear, waiting for user interaction. I need the first panel to be visible to the user on load, along with the other tabs on the top -- without the darn FOUC.</p>
  
  <p>Does anyone know how to definitely resolve FOUC on jQuery UI tabs? It's really not looking good and I may have to abandon tabs altogether if I can't resolve this.</p>
  
  <p>Any pointers/roadmaps are much appreciated!</p>