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?

The Question Comments :
  • 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.

The Answer 1

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.

The Answer 2

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)

The Answer 3

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.

The Answer 4

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;
}

The Answer 5

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>

The Answer 6

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.

The Answer 7

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>

<a id="displayText" href="javascript:toggle();">show</a> <== click Here

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

Source: Here

The Answer 8

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">

The Answer 9

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.

The Answer 10

0 people think this answer is useful

display: none;

This should make the element disappear and not take up any space.

Tags:,

Add a Comment