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> 

Answer 3

Using the following methods, you tell the browser to ignore these elements on the page.

Use display none on the element eighter in HTML, or in CSS files.

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

Attribute hidden is also helpful.

 <div hidden> This is my DIV element. </div>