Are you looking for a simple JavaScript funciont to show/hide HTML elements? Take a look at this post.
This is the most simple Javascript function that I have written and used in some web projects usefull to show and hide a layer using CSS "display" property.
document.getElementById('id').style.display='block'
...to show the layer or...
document.getElementById('id').style.display='none'
... to hide the layer.
Download this scriptHow it works?
The script is very simple. The javascript function showlayer() has a parameter "layer", the layer ID that you want hide or show, for example:
<div id="myName">Antonio</div>
... in this example the layer ID is myName.
Now we will add a link that call the showlayer() function passing the layer ID:
<a href="#" onclick="javascript:showlayer('myName')">Hide / Show Layer </a>
Remember to add a link to show_layer.js into your page:
<script language="javascript" src="show_layer.js"></script>
The code
This is the code:
function showlayer(layer){
var myLayer = document.getElementById(layer).style.display;
if(myLayer=="none"){
document.getElementById(layer).style.display="block";
} else {
document.getElementById(layer).style.display="none";
}
}
var myLayer = document.getElementById(layer).style.display;
if(myLayer=="none"){
document.getElementById(layer).style.display="block";
} else {
document.getElementById(layer).style.display="none";
}
}
I am 
Hey
Love the function.
Im trying to use it for a menu im building.
I have a number of items on the menu, is there a way to hide all other layers when clicking on different link?
Awesome script!! Thank you SOOO Much!!!
@ nothing lost:
at the beginning of your div, add this in:
style="display: none;"
so your div should read: < div style="display: none;" id="name" >
This way it will hide the other layers when you have clicked on a different link, until it has been called. This should be applied to all of the divs except the div you want to show on default.
Really simple and effective solution.Thank you
You saved my day! Thanks alot!!!
Works well, although on my test, if a link is on lower part of page it seems to push the scrolling to top of page.
It looks very nice, thank you for this great script.
Thanks for the great script! A modification I made to hide the element from the start, but to show the element if javascript is not present (thereby making it more accessible) was to add this to the JS file:
function hidelayer(layer){
var myLayer = document.getElementById(layer).style.display;
if(myLayer=="block"){
document.getElementById(layer).style.display="none";
} else {
document.getElementById(layer).style.display="block";
}
}then add style="display:block;" to the element to be hidden.
In the body tag include an onload < body onLoad="javascript:hidelayer('myElement')" >The element is hidden until the users chooses to display it, but if Javascript isn't present they will be able to see the element.
hi this script was realy nice thanks but i have a question about Jess's tip.
im trying to have a layer linked to a button
and want the curent layer hidden when i klick the next button and shows that layer.
so far the < div style="display: none;" id="name" >
only hides the layers from start it wount rest one layer when hiting a new one to be viseble.
hope this question isent to stupid ;)