How do you create a hidden div that doesn't create a line break or horizontal space?

Question

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?

@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
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
. When the AJAX request finishes, you turn the triangle south and remove the "display: none;" from the
's style. The script.aculo.us library does this a lot. — Mike DeSimone, Jan 02 '10 at 18:30

score 835 · Accepted Answer · answered Jan 02 '10 at 17:02

835

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.

answered Jan 02 '10 at 17:02

Christian C. Salvadó

807,428
183
922
838

53

to show the div again (just in case anybody needs as did I) - `
`
– anujin May 11 '13 at 07:26
17

@anujin: Why `inline-block`? The default `display` value for a div is `block`! – MMM Jan 29 '14 at 17:01
Is there a way to do the opposite? To change a div from `display: none` to `display: inline-block` or equivalent without the now-displayed div taking up space and moving my other DOM elements around? – bpromas Sep 25 '15 at 18:23
2

might be worth updating the answer to include the global HTML attribute [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) which is available since [HTML5.1](https://www.w3.org/TR/html51/editing.html#the-hidden-attribute) which is basically the same as saying `display: none` although straight from HTML. However any use of the `display` property overrides the behavior of the `hidden` global attribute. – Marius Mucenicu Aug 29 '19 at 04:43

score 91 · Answer 2 · edited May 24 '20 at 06:33

91

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)

edited May 24 '20 at 06:33

Robin Métral

3,099
3
17
32

answered Dec 18 '14 at 14:29

C_B

2,620
3
23
45

4

This is more semantically correct than hiding with CSS, it's better for accessibility, and it's supported by all major browsers. It should be the accepted answer in 2020. – Robin Métral May 23 '20 at 10:37
how does this this compare to display: none, especially considering a fade out animation? – Martin Meeser Dec 10 '20 at 21:35

score 30 · Answer 3 · answered Jan 02 '10 at 17:02

30

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.

answered Jan 02 '10 at 17:02

tvanfosson

524,688
99
697
795

I need to hide me alert msg on page load and wanted to show it again on button click. Tried `visibility: hidden` but that was showing empty space. `style="display: none;"` worked like a little charm :) – sohaiby Apr 27 '15 at 12:00

smac89 · Answer 4 · 2022-09-19T16:15:11.907

11

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

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

edited Sep 19 '22 at 16:15

answered Mar 05 '18 at 15:30

smac89

39,374
15
132
179

score 10 · Answer 5 · answered Jan 29 '14 at 16:55

10

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>

answered Jan 29 '14 at 16:55

Dave

1,823
2
16
26

code looks a lot cleaner this way! I prefer having a class over inline style – Harry Cho Sep 03 '15 at 07:33
"visibility: hidden;" is exactly what I need, thank you! – Chen Ni Jan 14 '21 at 12:56

score 8 · Answer 6 · answered Jan 02 '10 at 18:02

8

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

answered Jan 02 '10 at 18:02

Zeta Two

1,776
1
18
37

+1 , that's really a good suggestion ,but how to show only one checkbox without affecting all other checkboxes visibility ? – DayTimeCoder Jan 14 '13 at 06:21
1

@dotNetSoldier Old question but there should be an answer here. You have a css class called invis and you add/remove it from the checkbox or div by id using JS. – DanielST Jul 08 '14 at 18:37

THN · Answer 7 · 2023-02-06T01:49:05.540

To only 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 from the html completely, so some functionalities will be broken if they need to access the hidden element content.

score 5 · Answer 8 · answered Jan 02 '10 at 17:09

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.

score 5 · Answer 9 · edited Apr 01 '17 at 07:55

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

José Rasmussen · Answer 10 · 2020-04-10T08:18:41.587

2

display: none;

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

edited Apr 10 '20 at 08:18

answered Apr 03 '20 at 11:03

José Rasmussen

131
2
5

2

Thank you to the people that commented on the formatting of my answer. – José Rasmussen Apr 10 '20 at 08:24

score 0 · Answer 11 · answered Apr 19 '22 at 00:16

0

#divCheckbox {display: none;}

This should solve it

answered Apr 19 '22 at 00:16

lojolis

1
2

How do you create a hidden div that doesn't create a line break or horizontal space?

11 Answers11

Linked

Related