I'd like to hide a DIV on page load but cannot use CSS due to certain page restrictions that I have.

How can hide a DIV using Javascript or some other method? I'd like to have the DIV hidden on page load without requiring the user to press a button.

Cheers.

I'd like to hide a DIV on page load but cannot use CSS due to certain page restrictions that I have.

How can hide a DIV using Javascript or some other method? I'd like to have the DIV hidden on page load without requiring the user to press a button.

Cheers.

• javascript
• html
• css

• 1 What do you mean by "cannot use CSS"? You cannot use even inline styles? – Tadeck Commented Jun 26, 2011 at 20:50
• 1 document.onload = function() { document.getElementById("div").style.display = "none"; } Code from Jarred wraped in the onload anonymus function event. – user744186 Commented Jun 26, 2011 at 20:51
• 1 You have to remember that there's a slight chance that the user will have javascript turned off. In that case you simply can't hide div without using css. – AR. Commented Jun 26, 2011 at 20:56

5 Answers 5

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

http://jsfiddle/nXvF5/

Or, in jQuery:

$(document).ready(function(){
    $('#your_div_id_or_other_selector').hide();
});

http://jsfiddle/nXvF5/1/

document.getElementById("yourDivId").style.display = "none";

That will set the CSS display property to none, which hides the element and removes any space occupied by that element in the DOM.

You can run this code in the onload function, so it runs when the page loads:

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

If you want to hide the element, but keep it's space in the DOM, you can use visibility = "hidden" instead of display = "none".

Just add hidden="true" to the HTML tag.

Using Jquery:

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

To show it again:

$("#div_id").show();

In regular javascript:

# retains the hidden div's position
`document.getElementById('div_id').style.visibility = 'hidden';`

# collapses the hidden div's positioning
`document.getElementById('div_id').style.display = 'none';`

Assuming you can use some framework for simplicity and you will choose jQuery, you have three options (see jsfiddle):

jQuery('#mydiv1').hide(); // bases on CSS, as other answers
jQuery('#mydiv2').remove();
jQuery('#mydiv3').detach();

Since you asked specifically not to provide CSS-based solution, the first one is actually something you do not want to use. The second one removes your div with all the events etc. and the third one removes it without removing events (so you should be able to add it again when needed).

For details please refer to jQuery documentation on api.jquery..

Did it help?