Why display hide elements work when page refresh

Question

I have written a jQuery to hide a div in the content when page re-size (for mobile). It works fine in first time but when I reload the page, it shows hidden element(which I hide in jQuery).

This is my jQuery code:

$(window).resize(function () {    
    if ($(this).width() < 1200) {
        $('.divHide').hide(); 
    } else {
        $('.divHide').show();
    }    
});

Answer 1

You have to write the function inside document ready.

ie,

$( document ).ready(function() {
     if ($(this).width() < 1200) {
             $('.divHide').hide();
          }
          else {
             $('.divHide').show();
          }
});

better way to do this is

 function myfunction() {
       if ($(this).width() < 1200) {
         $('.divHide').hide();
      }
      else {
         $('.divHide').show();
      }
    }
 $(document).ready(myfunction);
 $(window).on('resize',myfunction);