Randy Webb wrote:
[color=blue]
> FP said the following on 6/28/2006 11:44 AM:[color=green]
>> Erwin Moller wrote:[color=darkred]
>>> 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
>>>[/color][/color][/color]
onClick="document.getElementById('myId').style.dis play=block">show</span>[color=blue][color=green][color=darkred]
>>>
>>> <div id="myId" style="display:block">
>>> <input type="text" name="bla">
>>> </div>[/color]
>>
>>
>> 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).[/color]
>
> You can do it without CSS but CSS makes it a lot simpler. And, Java !=
> Javascript.
>[color=green]
>> 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,[/color]
>
> Because it's not a button.
>[color=green]
>> the "Java Hide" acts like a button but doesn't do anything.[/color]
>
>
> It does for me, it hides the div tag. It doesn't actually "hide" it, it
> removes it from the flow of the page.
>[color=green]
>> <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>[/color]
>
> ='none' otherwise it tries to evaluate none as a variable and is
> undefined (the error message tells you that)
>[color=green]
>> <span
>> onClick="document.getElementById('myId').style.dis play=block">Span
>> Show</span>[/color]
>
> 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.
>[/color]
Oops, sorry for none / 'none' confusion.
My bad.
Thanks for correcting Randy.
Regards,
Erwin Moller
