{"id":3027,"date":"2010-04-07T09:53:01","date_gmt":"2010-04-07T09:53:01","guid":{"rendered":"https:\/\/test.simple-talk.com\/uncategorized\/avoiding-flicker-with-jquery-tabs\/"},"modified":"2016-07-28T10:49:56","modified_gmt":"2016-07-28T10:49:56","slug":"avoiding-flicker-with-jquery-tabs","status":"publish","type":"post","link":"https:\/\/www.red-gate.com\/simple-talk\/blogs\/avoiding-flicker-with-jquery-tabs\/","title":{"rendered":"Avoiding Flicker with JQuery Tabs"},"content":{"rendered":"

I am a huge fan of JQuery because it seems like every time I want to do something it has a plugin that already does it.  Adding a tabbed interface to a web page was always quite an annoyance, but JQuery UI offers a pretty descent tabs solution (click here to see it<\/a>).  If you read through the documentation, you’ll find that you can create a tabbed interface by calling the tabs()<\/strong> method on an element containing an unordered list.  The only problem that I’ve experienced with the method is that on slower machines you can see the unordered list render out in its original state before being updated into the final tabbed interface.  A quick way to fix that issues is to set the CSS display property of the element to none, then call the show()<\/strong> method directly after calling the tabs()<\/strong> method.  This keeps the element completely hidden while JQuery sets up the tabs interface and eliminates the flicker.<\/p>\n

<SCRIPT type=\"text\/javascript\">
     $(function()
     <\/code>{
          $(\"#tabs\").tabs();
          $(\"#tabs\").show();
     });
<\/SCRIPT> <\/p>\n

<\/code><div id=\"quot;tabs\"\" style=\"display:none;\">
    <ul>
        <li><a href=\"#tabs-1\">First Tab<\/a><\/li>
        <li><a href=\"#tabs-2\">Second Tab<\/a><\/li>
        <li><a href=\"#tabs-3\">Third Tab<\/a><\/li>
    <\/ul>
    ...<\/code>
<\/div><\/code><\/p>\n","protected":false},"excerpt":{"rendered":"

I am a huge fan of JQuery because it seems like every time I want to do something it has a plugin that already does it.  Adding a tabbed interface to a web page was always quite an annoyance, but JQuery UI offers a pretty descent tabs solution (click here to see it).  If you……<\/p>\n","protected":false},"author":46738,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[],"coauthors":[],"class_list":["post-3027","post","type-post","status-publish","format-standard","hentry","category-blogs"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/3027","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/users\/46738"}],"replies":[{"embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/comments?post=3027"}],"version-history":[{"count":2,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/3027\/revisions"}],"predecessor-version":[{"id":41875,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/3027\/revisions\/41875"}],"wp:attachment":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/media?parent=3027"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/categories?post=3027"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/tags?post=3027"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/coauthors?post=3027"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}