FP said the following on 6/28/2006 11:44 AM:
Erwin Moller wrote: The easiest way to show/hide some part of the page (form or something else)
is using CSS.
Put the part you want to show/hide in a div, and change the
display-property.
<span
onClick="document.getElementById('myId').style.dis play=none">hide</span>
<span
onClick="document.getElementById('myId').style.dis play=block">show</span>
<div id="myId" style="display:block">
<input type="text" name="bla">
</div>
I tried your code and couldn't get it to work. I'm not familiar with
style sheets, nor Java. If possible I would like to do this without
CSS (less things to go wrong).
You can do it without CSS but CSS makes it a lot simpler. And, Java !=
Javascript.
Below is the exact code I tried, please
point out any errors, and keep in mind I'm new to this.
I tried merging your code with other posts I read, all without luck.
The "Span Hide" doesn't act as a button,
Because it's not a button.
the "Java Hide" acts like a button but doesn't do anything.
It does for me, it hides the div tag. It doesn't actually "hide" it, it
removes it from the flow of the page.
<HTML>
<SCRIPT LANGUAGE="JavaScript">
function Show(){
document.getElementById( "myId" ).style.display = "block"; }
function Hide(){
document.getElementById( "myId" ).style.display = "none"; }
</script>
<BODY>
<span onClick="document.getElementById('myId').style.dis play=none">Span
Hide</span>
='none' otherwise it tries to evaluate none as a variable and is
undefined (the error message tells you that)
<span
onClick="document.getElementById('myId').style.dis play=block">Span
Show</span>
ditto.
You hide an element one of two ways. You change it's visibility property
or you change it's display property. Which one you use depends on the
effect you want.
<script type="text/javascript">
function changeDisplay(elem,displayMode){
document.getElementById(elem).style.display = displayMode;
}
function changeVisibility(elem,visibilityMode){
document.getElementById(elem).style.visibility = visibilityMode;
}
</script>
HTML:
<div id="div1" style="display: visible">Div 1</div>
<div id="div2" style="visibility: visible">Div 2</div>
<button onclick="changeDisplay('div1','block')">
Make Div1 Visible</button>
<button onclick="changeDisplay('div1','none')">
Make Div1 Hidden</button>
<button onclick="changeVisibility('div2','hidden')">
Make Div2 Hidden</button>
<button onclick="changeVisibility('div2','visible')">
Make Div2 Visible</button>
Have fun.
--
Randy
comp.lang.javascript FAQ -
http://jibbering.com/faq & newsgroup weekly
Temporarily at:
http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
Javascript Best Practices -
http://www.JavascriptToolbox.com/bestpractices/ 
