File: C:/xampp/htdocs/ACFrame/dhtmlTT.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Using a DOM function</title>
<style>
a {background-color:#eee;}
a:hover {background:#ff0;}
#toggleMe {background:#cfc; display:none; margin:30px 0; padding:1em;}
</style>
</head>
<body>
<h1>Using a DOM function</h1>
<h2><a id="showhide" href="#">Show paragraph <img src="frameimageW.jpg" name="Image8" height="58" border="0" id="Image8" /></a></h2>
<p id="toggleMe">This is the paragraph that is only displayed on request. <img src="frameimageB.jpg" name="Image7" height="58" border="0" id="Image7" /> </p>
<p>The general flow of the document continues.</p>
<script>
changeDisplayState = function (id) {
var d = document.getElementById('showhide'),
e = document.getElementById(id);
if (e.style.display === 'none' || e.style.display === '') {
e.style.display = 'block';
d.innerHTML = 'Hide paragraph <img src="frameimageW.jpg" name="Image8" height="58" border="0" id="Image8" />';
}
else {
e.style.display = 'none';
d.innerHTML = 'Show paragraph<img src="frameimageB.jpg" name="Image7" height="58" border="0" id="Image7" />';
}
};
document.getElementById('showhide').onclick = function () {
changeDisplayState('toggleMe');
return false;
};
</script>
</body>
</html>