420

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?

2
  • Is there any use for such a div?
    – Jonno_FTW
    Jan 2, 2010 at 17:03
  • 7
    @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. Jan 2, 2010 at 18:30

11 Answers 11

837

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.

4
  • 54
    to show the div again (just in case anybody needs as did I) - <div id="divCheckbox" style="display: inline-block;">
    – anujin
    May 11, 2013 at 7:26
  • 17
    @anujin: Why inline-block? The default display value for a div is block!
    – MMM
    Jan 29, 2014 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, 2015 at 18:23
  • 2
    might be worth updating the answer to include the global HTML attribute hidden which is available since HTML5.1 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. Aug 29, 2019 at 4:43
92

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)

2
  • 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. May 23, 2020 at 10:37
  • how does this this compare to display: none, especially considering a fade out animation? Dec 10, 2020 at 21:35
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.

1
  • 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, 2015 at 12:00
12

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">
0
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>
2
  • code looks a lot cleaner this way! I prefer having a class over inline style
    – Harry Cho
    Sep 3, 2015 at 7:33
  • "visibility: hidden;" is exactly what I need, thank you!
    – Chen Ni
    Jan 14, 2021 at 12:56
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;
}
2
  • +1 , that's really a good suggestion ,but how to show only one checkbox without affecting all other checkboxes visibility ? Jan 14, 2013 at 6: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 8, 2014 at 18:37
6

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.

5

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.

5

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

2

display: none;

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

1
  • 2
    Thank you to the people that commented on the formatting of my answer. Apr 10, 2020 at 8:24
0

#divCheckbox {display: none;}

This should solve it

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.