How do I hide an HTML element before the page load

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

In CSS:

#extraControls { display: none; }

Or in HTML:

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