Solution 1 :

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.

Solution 2 :

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

Find more information here

Problem :

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?


Comment posted by the documentation

“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.”

Comment posted by What is the difference between visibility:hidden and display:none?

Does this answer your question?