Question

I have some JQuery code that shows or hides a div.

$("div#extraControls").show();   // OR .hide()

I initially want the div to be not visible so I used:

$(document).ready(function() {
    $("div#extraControls").hide();
});

However, on the browser, the content loads visible for a second before disappearing, which is not what I want.

How do I set the hide the element before the page loads whilst keeping the ability to show hide it dynamically with a script?

Answer 1

div.hidden
{
   display: none
}

<div id="extraControls" class="hidden">
</div>

$(document).ready(function() {
    $("div#extraControls").removeClass("hidden");
});