Display None vs Visibility Hidden

Code example for display none vs visibility hidden

HTML

<h1>HTML, CSS and JavaScript</h1>
  <p>Display: None vs Visibility: Hidden<a href="https://jsfiddle.net/lakenney/b54gjokc/">See it on JSFiddle</a>
  </p>
  
<div>
  <p>Sam I am</p>
</div>

<div class="button" id="removeMeButton">display: none removes it from the page</div>
  <div id="removeMe">
    <p>Do you like green eggs and ham?</p>
    <img class="thumbnail" src="http://frontenddeveloper.guru/img/greeneggsham.jpg">
  </div>
  <div>Display: none removes content from the page and content fills the space.
  </div>  

  <div class="button extraSpace" id="hideMeButton">visibility: hidden hides content but reserves space.</div>
  <div id="hideMe">
    <p>Do you like green eggs and ham?</p>
    <img class="thumbnail" src="http://frontenddeveloper.guru/img/greeneggsham.jpg">
  </div>
  <div>Visibility: hidden hides content from the page and reserves space. See how this text didn't move up like the previous example. That's the difference.
  </div>  

  <div class="button extraSpace" id="showAllButton">Reset button to show all</div>
  <div id="showAll">
    <p>Do you like green eggs and ham?</p>
    <img class="thumbnail" src="http://frontenddeveloper.guru/img/greeneggsham.jpg">
  </div>
  <div>Play it again Sam I am.
  </div>  
    
  <div>
  Reference: A similar in-line<a href="http://www.w3schools.com/css/tryit.asp?filename=trycss_display"> example on W3schools</a>
  </div>

CSS

html{
  opacity: .5;
  display: none;
}

.samtext{
    color: #565350;
    font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
}
.extraSpace {
  margin-top: 40px;
}

.button {
	text-indent:0
	border: 1px solid #edo933;
	display:inline-block;
	color:#ffffff;
	font-family: Arial;
	font-size: 15px;
	font-weight: bold;
	font-style: normal;
	height:65px
	line-height:65px;
	padding: .5 em;
	text-decoration: none;
	text-align:center;
	text-shadow:1px 1px 0px #cd8a15;
	background-color: #f6b33d;
}

JavaScript

/* sam.js */
var removeButton = document.getElementById("removeMeButton");
//This is the onclick handler
removeButton.onclick=function(){
	var removeMeElement = document.getElementById("removeMe");
	removeMeElement.style.display = "none";
}

var hideButton = document.getElementById("hideMeButton");
//Another onclick handler
hideButton.onclick=function(){
	var hideMeElement = document.getElementById("hideMe");
	hideMeElement.style.visibility = "hidden";
}

/*
var showButton = document.getElementById("showAllButton");
//Another onclick handler
showButton.onclick=function(){
	var showMeElement = document.getElementById("showAll");
  showMeElement.style.display = "block";
	showMeElement.style.visibility = "visible";
}*/
var showButton = document.getElementById("showAllButton");
showButton.onclick=function(){
    document.getElementById("removeMe").style.display = "block";
    document.getElementById("hideMe").style.visibility = "visible";
}