<style type="text/css">
p#visibility { visibility: visible }
p#display { display: none }
</style>

<script type="text/javascript" language="Javascript">
function toggleVisibility() {  
 if( document.getElementById("visibility").style.visibility == "hidden" ) {
    document.getElementById("visibility").style.visibility = "visible";
  } else {
    document.getElementById("visibility").style.visibility = "hidden";
  }
}

function toggleDisplay() {
if( document.getElementById("display").style.display == "none" ) {
    document.getElementById("display").style.display = "block";
  } else {
    document.getElementById("display").style.display = "none"; }
}
</script>

......

<hr>
<button onclick="toggleVisibility()">Visibility Toggle Button</button>
<p id="visibility">This text is hidden using the visibility property</p>

<hr>
<button onclick="toggleDisplay()">Display Toggle Button</button>
<p id="display">This text is hidden using the display property</p>
<p>This text stays in view</p>
</div>