display or visibility ?

I want to toggle a <div in and out of view.
My question, which of the below examples would best be supported.
Or is there another approach, that would be better used..TIA..

..A..
<a href="#" onclick="C1.style.visibility='visible';">open</a>
<a href="#" onclick="C1.style.visibility='hidden'">close</a>

..B..
<a href="#" onclick="C1.style.display='block'">display</a>
<a href="#"
onclick="C1.style.style.display='none'">none</a>

..C..
<a href="#"
onclick="document.getElementById('C1').style.visib ility='visible'">open</a>
<a href="#"
onclick="document.getElementById('C1').style.visib ility='hidden'">close</a>

..D..
<a href="#"
onclick="document.getElementById('C1').style.displ ay='block'">display</a>
<a href="#"
onclick="document.getElementById('C1').style.displ ay='none'">none</a>

wasntme wrote:

I want to toggle a <div in and out of view.
My question, which of the below examples would best be supported.
Or is there another approach, that would be better used..TIA..

.A..
a href="#" onclick="C1.style.visibility='visible';">open</a
a href="#" onclick="C1.style.visibility='hidden'">close</a

.B..
a href="#" onclick="C1.style.display='block'">display</a
a href="#"
onclick="C1.style.style.display='none'">none</a

.C..
a href="#"
onclick="document.getElementById('C1').style.visib ility='visible'">open</a
a href="#"
onclick="document.getElementById('C1').style.visib ility='hidden'">close</a

.D..
a href="#"
onclick="document.getElementById('C1').style.displ ay='block'">display</a
a href="#"
onclick="document.getElementById('C1').style.displ ay='none'">none</a

Neither of the above supported on any of my browsers with JavaScript
off I think?

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

dcook81056 (AT) webtv (DOT) net (wasntme) wrote:

I want to toggle a <div in and out of view.
My question, which of the below examples would best be supported.
Or is there another approach, that would be better used..TIA..

I can't comment on the scripting aspect (not my forte), but
visibility:hidden is rather different to display:none, when you toggle
visibility the element remains part of the flow, hence it takes up
screen space, if you set display to none then the element is removed
from the flow.

--
Spartanicus

dcook81056 (AT) webtv (DOT) net (wasntme) wrote:

I want to toggle a <div in and out of view.

onclick="this.style.visibility='hidden'; return false;"
onclick="this.style.visibility='visible'; return false;"

or

onclick="this.style.display='none'; return false;"
onclick="this.style.display=''; return false;"

For display vs. visibility, see Spartanicus' reply.

Bye,
Martin

wasntme wrote:

I want to toggle a <div in and out of view.
My question, which of the below examples would best be supported.
Or is there another approach, that would be better used..TIA..

.A..
a href="#" onclick="C1.style.visibility='visible';">open</a
a href="#" onclick="C1.style.visibility='hidden'">close</a

Presumably 'C1' is the id or name of some element. If so, the above
script uses Microsoft's invention of making ids and names global
variables. Reference your elements some other way (e.g. as you've
done for C & D below) if you want to support those browsers that
conform to W3C standards (which includes IE 5.5 onward).

.B..
a href="#" onclick="C1.style.display='block'">display</a
a href="#"
onclick="C1.style.style.display='none'">none</a

A elements are not block by default, they're inline. The best method
is to use 'none' and ''. Setting display to the empty string will let
it return to its default or whatever has been set in a style rule
somewhere.

.C..
a href="#"
onclick="document.getElementById('C1').style.visib ility='visible'">open</a
a href="#"
onclick="document.getElementById('C1').style.visib ility='hidden'">close</a

Better, but not perfect. Not all browsers support the W3C's
getElementById, check the comp.lang.javascript FAQ for advice.

<URL:http://www.jibbering.com/faq>

Search clj for examples of 'showHide' scripts.

[...]