In Action

Using Javascript and div tag to hide / unhide text

Please note that this script may not work in older browsers. If you are looking for something more cross browser compatible with older browser versions you should do this using JQuery. (Getting inner html using JQuery)

Example

The javascript is called from an html anchor tag. The function accepts two argument. The first argument is the name of the anchor tag. This is so we can determine the state of hide/unhide and set an approriate label for the anchor. The second argument is the name of the div tag.

function eToggle(anctag,darg)

Javascript in Action


Show Help



Javascript Code

Javascript Code

Javascript and html code are self contained below.

 
<script language="javascript"> 
function eToggle(anctag,darg) 
{
  var ele = document.getElementById(darg);
  var text = document.getElementById(anctag);
  if(ele.style.display == "block") 
  {
    ele.style.display = "none";
	text.innerHTML = "Show Help";
  }
  else 
  {
	ele.style.display = "block";
	text.innerHTML = "Hide Help";
  }
} 
</script>

HTML Code

HTML Code


<h1>Hide/Unhide a Div Tag</h1>
<h2>Javascript in Action
  <h2>
</h2>
<hr />
<p><a href="javascript:eToggle('atag','helptxt');" 
    id="atag">Show Help</a>
<p>
<div id="helptxt" style="display: none">
  <h3>div content goes here</h3>
</div>
<hr />
</body>
</html>