How to hide div on load of webpage

Question

I have a basic script which shows/hides a div. I'm using this for a drop-down menu.

https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp

I'm looking for the div element to be hidden when the page loads instead of it showing and having to click it to toggle it.

Any help is appreciated!

Answer 1

Use display: none in div like below

<div id="myDIV" style="display:none">
  This is my DIV element.
</div>

or you can create a class and assign to the div.

<style>
.hide{
   display:none;
}
</style>


<div id="myDIV" class="hide">
  This is my DIV element.
</div>

Answer 2

Instead of CSS, you may also use JavaScript to manipulate the display of a web page by taking advantage of events, such as onload.

window.onload = function(){
  document.getElementById("myDIV").style.display='none';
};

<div>
  This is the first DIV element.
</div>

<div id="myDIV">
  This is the 2nd DIV element.
</div>

<div>
  This is the last DIV element.
</div>