Show/Hide (toggle) an Element

If you have developed websites for more than a few minutes, you have inevitably been asked to do some cutesy stuff like adding flash, drop-down menus or toggling elements. While all of these may be ligitimate features of a site, they may not be the easiest to implement and perhaps even very challenging.  I have recently been overhauling my employer’s website and needed to show/hide some text when a visitor clicked on a list item <li>TEXT</li>.  While I knew what I wanted to do, I had some problems getting it to work.  Unfortunately, I could not figure our (or remember) the javascript command for viewing the value of an element’s display attribute.  After a quick Google search, I found it.

<script type=”text/javascript”>
<!–
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == ‘block’)
e.style.display = ‘none’;
else
e.style.display = ‘block’;

}
//–>
</script>

Now, you will notice that the attribute I was looking for is “display”.  I made the mistake of adding “value” to the end.

I can say it works well with no problems.  I will probably make changes to it, but otherwise it works if you need a quick way to toggle element’s visibility. Thanks to the folks at Movalog for the help.