javascript - Why are my Divs flashing on screen before hiding? -


i have tabber, , 3/4 tabs should hidden flash on screen before display:none;. i've tried adding .addclass jquery, tried inline styling display:none; on the divs , have display:none set in css file , still can't solve this? causing this?

jquery(function($) {    $('.professor__tabs').each(function() {        $('.tabs__body', this).addclass('tabs__body--is-hidden');      $('.tabs__head', this).on('click', function(index) {            var test = $(this).index();            $('.tabs__body').addclass('tabs__body--is-hidden');          $('.tabs__head')            .removeclass('tabs__head--is-active')            .filter($(this))            .addclass('tabs__head--is-active')            .next('.tabs__body')            .removeclass('tabs__body--is-hidden');          })        .filter(':first')        .click();    });  });
 .tabs__body {     -webkit-box-flex: 0;     -webkit-flex: 0 0 100%;     -ms-flex: 0 0 100%;     flex: 0 0 100%;     -webkit-box-ordinal-group: 3;     -webkit-order: 2;     -ms-flex-order: 2;     order: 2;     background-color: white;     padding: 20px;     min-height: 260px;     max-height: 410px;     overflow: auto;     border-bottom-left-radius: 6px;     border-bottom-right-radius: 6px;     display: block;   }   .tabs__body--is-hidden {     display: none;   }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    <div class="professor__tabs">    <div class="tabs__head">intro</div>    <div class="tabs__body">      1    </div>      <div class="tabs__head">events</div>    <div class="tabs__body">      2    </div>      <div class="tabs__head">stream</div>    <div class="tabs__body">      3    </div>      <div class="tabs__head last-head">posts</div>    <div class="tabs__body">      4    </div>

i noticed can't replicate on jsfiddle, i'll include link anyways: here

due way implemented hiding feature browser not hide divs until document ready - instead default should have .tabs__body--is-hidden on divs using html , process visible div via js.


Comments

Popular posts from this blog

sequelize.js - Sequelize group by with association includes id -

android - Robolectric "INTERNET permission is required" -

java - Android raising EPERM (Operation not permitted) when attempting to send UDP packet after network connection -