Toggle function
takes the ID of the element to toggle
To hide an element, you just set display to ‘none’.
<script type="text/javascript">
function showText(vThis)
{
vParent = vThis.parentNode;
vSibling = vParent.nextSibling;
while (vSibling.nodeType==3) { // Fix for Mozilla/FireFox Empty Space becomes a TextNode or Something
vSibling = vSibling.nextSibling;
};
if(vSibling.style.display == "none")
{
document.getElementById('link').innerHTML = "Hide";
vSibling.style.display = "block";
} else {
document.getElementById('link').innerHTML = "Show";
vSibling.style.display = "none";
}
return;
}
</script>
For example if you wanted to hide this link:
click on link Hide it hides div #text .
Example:
<a onclick="showText(this);" id="link">Hide</a>
<div id="text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat ante et ante. Donec sodales lacinia ante. Quisque sem urna, iaculis id, rhoncus ac, venenatis ut, massa. Mauris sit amet mauris. Aliquam ut massa at ante condimentum gravida. Etiam pulvinar massa a ante. Integer pharetra. Fusce quam neque, aliquet tristique, ullamcorper id, blandit id, tortor. Nunc lacinia egestas enim. Maecenas molestie rhoncus quam. </div>
After you clicked on it, the link Hide change the text to Show. with this javascript function ( document.getElementById(‘link’).innerHTML = “Show”; )
