# html – How do you create a hidden div that doesn’t create a line break or horizontal space?

## The Question :

373 people think this question is useful

I want to have a hidden checkbox that doesn’t take up any space on the screen.

If I have this:

<div id="divCheckbox" style="visibility: hidden">



I don’t see the checkbox, but it still creates a new line.

If I have this:

<div id="divCheckbox" style="visibility: hidden; display:inline;">



it no longer creates a new line, but it takes up horizontal space on the screen.

Is there a way to have a hidden div that takes up no room (vertical or horizontal?

• Is there any use for such a div?
• @Jonno: It’s commonly used in AJAX. Say you have a list of items with disclosure triangles. You want details, or a subtree, to appear when the user clicks the disclosure triangle. So what you do is put a <div id=”theID” style=”display: none;”> where the details should go. Then, when the user clicks the triangle, you move the triangle to a “halfway” position (pointing southeast) and fire off an AJAX request to fill in the <div>. When the AJAX request finishes, you turn the triangle south and remove the “display: none;” from the <div>’s style. The script.aculo.us library does this a lot.

752 people think this answer is useful

Use display:none;

<div id="divCheckbox" style="display: none;">


• visibility: hidden hides the element, but it still takes up space in the layout.

• display: none removes the element completely from the document, it doesn’t take up any space.

62 people think this answer is useful

Since the release of HTML5 one can now simply do:

<div hidden>This div is hidden</div>



Note: This is not supported by some old browsers, most notably IE < 11.

Hidden Attribute Documentation (MDN,W3C)

29 people think this answer is useful

Use style="display: none;". Also, you probably don’t need to have the DIV, just setting the style to display: none on the checkbox would probably be sufficient.

8 people think this answer is useful

In addition to CMS´ answer you may want to consider putting the style in an external stylesheet and assign the style to the id, like this:

#divCheckbox {
display: none;
}



8 people think this answer is useful

Since you should focus on usability and generalities in CSS, rather than use an id to point to a specific layout element (which results in huge or multiple css files) you should probably instead use a true class in your linked .css file:

.hidden {
visibility: hidden;
display: none;
}



or for the minimalist:

.hidden {
display: none;
}



Now you can simply apply it via:

<div class="hidden"> content </div>



5 people think this answer is useful

Consider using <span> to isolate small segments of markup to be styled without breaking up layout. This would seem to be more idiomatic than trying to force a <div> not to display itself–if in fact the checkbox itself cannot be styled in the way you want.

4 people think this answer is useful

Show / hide by mouse click:

<script language="javascript">

function toggle() {

var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");

if (ele.style.display == "block") {

ele.style.display = "none";
text.innerHTML = "show";
}
else {

ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>

<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>



Source: Here

4 people think this answer is useful

To prevent the checkbox from taking up any space without removing it from the DOM, use hidden.

<div hidden id="divCheckbox">



To prevent the checkbox from taking up any space and also removing it from the DOM, use display: none.

<div id="divCheckbox" style="display:none">



3 people think this answer is useful

To hide the element visually, but keep it in the html, you can use:

<div style='visibility:hidden; overflow:hidden; height:0; width:0;'>
[content]
</div>



or

<div style='visibility:hidden; overflow:hidden; position:absolute;'>
[content]
</div>



What may go wrong with display:none? It removes the element completely from the html, so some functionalities may be broken if they need to access something in the hidden element.

display: none;