Question

When I hide a selection:

$("#someselector").hide();

I usually put it on the bottom. When that webpage shows up, for a brief moment I see the hidden selection. Then it disappears, as it should.

That’s not quite what I wanted to see.

Is there a way to stop that quick view of the “hidden” selection?

Answer 1

The reason you see the hidden element when the page is loading is because you have to wait for the page to be downloaded and for the javascript to be processed before it hits the code that hides that element. If the intial state of the element is hidden then just set the CSS to display none. The style sheet in the head is processed before the html so when the html is rendered it will not display that element.

Set the style in the element in the CSS file:(not using jQuery)

 #someselector{
        display:none;
    }

… or create a hidden class

.hide{
   display:none;
}

<div id="someselector" class="hide">content</div>

… or set inline style ( not recommended )

<div id="someselector" style="display:none;">content</div>

$(‘#someselector’).show(); and $(‘#someselector’).hide(); will still work the same.