tabber flickers while page loading

Question

I have a tabber which flickers while it is loading...when page is loading,i do not see it as tab,when page completes its loading then i get proper loading...i want to avoid it. It is both in FireFox and Chroom.

<div class="tabber">  
<div class="tabbertab tab_buy">
<h2>Buy</h2>    
<div class="buy_cont">
<input id="txt" name="txt"  type="text" placeholder="Search by  Keyword..." />
 <div class="loc_sec">
<a href="#" target="_blank"><img src="images/map_ico.png" alt="" />
Location Map</a>
</div>
</div> </div>

<div class="tabbertab tab_rent">
<h2>rent</h2>   
<div class="buy_cont">
<input id="txt" name="txt"  type="text" placeholder="Search by  Keyword..." />

<div class="loc_sec">
<a href="#" target="_blank"><img src="images/map_ico.png" alt="" />
Location Map</a>
</div> </div>
</div>
</div>

Answer 1

Set #tabber to display : none in your css file, this will remove your tabber while your document is loading.

At the end of your javascript file that sets up tabber, use jQuery to show it again. this should execute once your JS files has finished loading

$(#tabber).css('display', 'block');

also, have a look at this thread

Answer 2

For your specific query, you can use it (without using of Tabber.js):

 $('.tabber').wrapInner('<div class="tabber-content-col"></div>'); $('.tabber-content-col').before('<div class="tabber-nav-col"><ul class="tab-nav"></ul></div>'); $('.tabbertab').each(function() { var tabNav = $(this).children('h2').text(); $('.tab-nav').append('<li>' + tabNav + '</li>'); }); $('.tabbertab').hide(); $('.tabbertab').first().show(); $('.tab-nav > li').first().addClass('active'); $('.tab-nav > li').click(function() { $(this).addClass('active').siblings().removeClass('active'); $('.tabbertab').eq($(this).index()).show().siblings().hide(); }); 

 ul.tab-nav { margin: 0; padding: 0; list-style: none; background: lightgray; } ul.tab-nav>li { padding: 10px 20px; display: inline-block; cursor: pointer; font-size: 16px; line-height: 1.2; text-transform: capitalize; } ul.tab-nav>li.active { background: #eee; } .tabber-content-col { overflow: hidden; background: #eee; padding: 40px 20px; margin: 0 0 50px; } .tabbertab { display: none; } .tabbertab>*:first-child { margin-top: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="tabber"> <div class="tabbertab tab_buy"> <h2>Buy</h2> <div class="buy_cont"> <input id="txt" name="txt" type="text" placeholder="Search by Keyword..." /> <div class="loc_sec"> <a href="#" target="_blank"><img src="images/map_ico.png" alt="" /> Location Map</a> </div> </div> </div> <div class="tabbertab tab_rent"> <h2>rent</h2> <div class="buy_cont"> <input id="txt" name="txt" type="text" placeholder="Search by Keyword..." /> <div class="loc_sec"> <a href="#" target="_blank"><img src="images/map_ico.png" alt="" /> Location Map</a> </div> </div> </div> </div> 

: