1

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.

Improve this question
3
  • 1
    What do you mean by "cannot use CSS"? You cannot use even inline styles? 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. 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. Commented Jun 26, 2011 at 20:56

5 Answers 5

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

http://jsfiddle.net/nXvF5/

Or, in jQuery:

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

http://jsfiddle.net/nXvF5/1/

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

are you aware this is in fact using CSS?
@Eric - No problem. @Tadeck - Sure, but since the OP said Javascript was OK, I didn't quibble with semantics. See Eric's comment directly above mine. :)
@Tadeck - Also note the upvote on your comment below the question is mine. :)
2 
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".

Improve this answer

3 Comments

OP asked for non-CSS solution. Even if I think this solution fits his needs, this is not actually what he said he wants.
@Tadeck - I assumed that by that, the OP meant that they could not use a style attribute or tag. Plus, the fact that the OP has said this approach works perfectly means it should be ok!
Upvoted - thank you! If I could choose two answers, yours would be the other.
2

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

Improve this answer

1 Comment

I can't edit the HTML of the DIV elements, unfortunately. Thank you for the answer, though.
0

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';`
Improve this answer

2 Comments

Unfortunately, this is using CSS.
I see, and if it is what OP wanted, I do not argue. Even if this is CSS-based answer though ;)
0

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.com.

Did it help?

Improve this answer

4 Comments

Unfortunately I cannot add jQuery to the page. I'm using a very outdated page editing software that is extremely picky (hence the odd non-CSS question). Thank you though! Upvoted anyways.
@Tadeck - I guess at this point should I point out this answer "uses" CSS as well? :P
@Jared Yes, it uses, but it shows exactly which solution provided within the answer is based on CSS ;) Also, if you are referring to selectors, then it not necessarily means the answer is "based" on CSS, I think ;)
@Tadeck - While I think you have a point, I think you're overthinking the issue. And I'm not talking about selectors, I'm talking about the first instance (which you note "uses CSS"). If you truly wanted to make this work, you would need to extract the DIV's html into a variable so it could possibly be reinserted. But overall I think you're taking this to an extreme that's not necessary (with all the comments on the other answers). :)