Show hide DIV with anchor tag change text

This is very helpful for developer who want to change the text of anchor tag and show and hide the content of according to anchor tag text.
You can use the following java script in header(tbl is id of table that we want to show hide the content of table).

<script language="javascript"> 
function toggle() {
	var ele = document.getElementById("tbl");
	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>

The below code is complete html code. Copy the below code on note pad and save file with .html and see the page result in web browser.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
 
	<script language="javascript"> 
function toggle() {
	var ele = document.getElementById("tbl");
	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>
</head>
 
<body onload="toggle()">
 
    <a id="displayText" href="javascript:toggle();">show</a> 
  <table id="tbl">
  <tr>
  <td>Welcome to author code. </td>
  </tr>
  </table>
</body>
</html>

Author: Pavan

I am asp.net developer have good knowledge of Asp.net ver 05,08,10 and good hand in sql server.Proficient in Object Oriented Programming and javascript, jQuery. Achievements - Integrate Spotfire, appnexus API ASP.net with sql server. Hobbies - Blogging ,Games, Movies ,Teaching,Keeping myself update with new technologies