Sometimes, you’ll write a piece of markup for a web page, and surprisingly, it works. Well, almost. If you close your eyes, hit F5, wait a second or so, and then look … it’s perfect! However, if you watch the page load, you can find things being rendered before final styling is applied.

The worst culprit for this sort of thing is when tabs are being used. jQuery or Bootstrap tabs, in particular. You see, your tab set is really a collection of lists and/or divs that are rendered within the page initially without styling. So everything is visible first up. To be blatantly obvious, all of your tab content flashes on to the page, and then, when the styling is applied, all except the active tab disappear.

In case you’re wondering … yes, people do care about this. So how to get around it? Well, I’ve created a CSS class called “initially-hidden”. It looks like this:

.initially-hidden {
  display: none;
}

Then you can apply this class to anything that you want to be hidden while the page is loaded. For instance (using Bootstrap’s tab code):

<div role="tabpanel" class="initially-hidden">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

If you leave things as they are, you’ll never see the tab, so what you have so far is (at best) a sub-optimal solution.

You also need this bit of code at the end of your page:

jQuery(document).ready(function() {
  $('.initially-hidden').show();
});

So at the end, when the page is fully loaded (including the style sheets), your component will be shown in it’s desired form.