Show hide DIV with anchor tag change text

Code File for Show hide DIV with anchor tag change text
601.0 B
236 Downloads
Details

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>