Will Perone

Using Javascript you can hide or toggle certain parts of your web page. There's 2 approaches to do this: by having a function that toggles elements or a function that where you can explicitly tell it to show or hide an element. First I will cover how to do the show/hide version.
The following code is javascript which can be either put in a .js file and included in your HTML by doing
<script type="text/javascript" src="file.js"></script> 
Or by including it directly in the HTML page by wrapping it with
<script type="text/javascript">(code goes here)</script>
And here's the code for it
function showhide(layer_ref, show)
{
    var state = '';
    if (show == false) state = 'none';				
	if (document.all) //IS IE 4 or 5 (or 6 beta)
		eval( 'document.all.' + layer_ref + '.style.display = state');	
	if (document.layers) //IS NETSCAPE 4 or below
		document.layers[layer_ref].display = state;
	if (document.getElementById && !document.all) // firefox
	{
		hza = document.getElementById(layer_ref);
		hza.style.display = state;
	}
}
The preceding function is called by doing something like the following
<a href="javascript:showhide('divcomment', true);">
Where 'divcomment' is defined like the following
<div id="divcomment">(HTML goes inside here)</div>
Or to hide the element by default do
<div id="divcomment" style="display: none;">(HTML goes inside here)</div>


There is an alternate way to do this when you need to just have something toggle on and off without having to keep track of whether it's shown or not.
function toggle(layer_ref)
{
    if (document.all) //IS IE 4 or 5 (or 6 beta)
		eval('if (document.all.' + layer_ref + '.style.display==\'none\') document.all.'
+ layer_ref + '.style.display= \'block\'; else document.all.'
+ layer_ref + '.style.display= \'none\''); if (document.layers) {//IS NETSCAPE 4 or below if (document.layers[layer_ref].display=='none') document.layers[layer_ref].display = 'block'; else document.layers[layer_ref].display = 'none'; } if (document.getElementById && !document.all) // firefox { hza = document.getElementById(layer_ref); if (hza.style.display=='none') hza.style.display= 'block'; else hza.style.display='none'; } }
This works pretty much the same way as the previous, you just don't need to specify the second parameter to show it.

6 Comments
wyfnkmhetv 31 12
Hello! Good Site! Thanks you!
Coder10 4 17
He purposefully chose the &quot;lightest&quot; student in the classroom to carry out a task, and then was surprised that the students called him on it? ,
Gracye 2011/07/09 Contact Me120 20
I have been so bewlidered in the past but now it all makes sense!
ulidsxsytg 2011/07/12 Contact Me1 12
Idnaan <a href="http://chjapseucyjm.com/">chjapseucyjm</a>
zach_rww 2012/12/030 0
thank you for sharing this! very useful javascript snippet.
Too_Nice 2013/12/170 0
hi will its me toonice from andrograde :)

<- for private contact