Thursday, October 22, 2009

JavaScript : Show / Hide contents

If the display style is none, the function will:
  • Set the display style to block - This is executed in the else block of the function. The inner HTML content of a DOM element with a block display setting will be visible unless it is furthered controlled by CSS styling.
  • Change the link text to hide - The inner HTML of the link text, which in this case is just show, is replaced with the hide text.
If the display style is block, the function will:
  • Set the display style to none - This is executed in the if block of the function. The inner HTML content of a DOM element with the none display setting will not be visible for the viewer.
  • Change the link text to show - The inner HTML of the link text, which in this case is just hide, is replaced with the show text.
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>

<a id="displayText" href="javascript:toggle();">show</a>
<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>

Taken From : http://www.randomsnippets.com/2008/02/12/how-to-hide-and-show-your-div/

No comments:

Post a Comment