How can I hide everything on a page except for one div, and then show it once a button is clicked?

Question

I want to hide everything on my page except a single div. Tried visibility: hidden; but the other divs still take up space.

Any help?

_“The `visibility` CSS property shows or hides an element without changing the layout of a document. To both hide an element **and remove it from the document layout, set the `display` property to `none`** instead of using `visibility`.”_ — from [the documentation](//developer.mozilla.org/en-US/docs/Web/CSS/visibility). — Sebastian Simon, Jul 08 '21 at 17:55
Does this answer your question? [What is the difference between visibility:hidden and display:none?](https://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone) — Sebastian Simon, Jul 08 '21 at 17:56

score 1 · Answer 1 · answered Jul 08 '21 at 17:54

1

Instead of visibility: hidden;, try display: none;. This way the blocks don't take up space.

Find more information here

answered Jul 08 '21 at 17:54

Andre

score 1 · Accepted Answer · answered Jul 08 '21 at 17:56

display: none; should do the trick.

if you want to get a div to show when you click a button, you could do

function showHidden(){
  document.getElementById("hidden").style.display = "block";
}

#hidden{display: none;}

<div> click the button to show another div </div>
<button onclick="showHidden()">button</button>
<div id="hidden">hidden div</div>

hopefully that helped.

2 Answers2