Difference between visibility and display (demo)

by jim ulle

HTML

<button id="btn1" onclick="btn1click()">button 1</button>
<button id="btn2" onclick="btn2click()">button 2</button>
<p id="p1">Paragraph one</p>
<p id="p2">paragraph two</p>

CSS

#p1 { visibility: hidden; }
#p2 { display: none; }

JavaScript

function btn1click() {
    document.getElementById("p1").style.visibility = "visible";
}
function btn2click() {
    document.getElementById("p2").style.display = "block";
}