The title is a little misleading. I would expect to toggle visibility using the "visibility" CSS property -- not "display". "display:none" removes the element entirely as if it didn't exist. "visibility:hidden" makes the element invisible without affecting the display.
...Doesn't seem to work for me. "Object required" error.
Also, I noticed it appends the pound sign ("#") to the end of the URL when you click Toggle. Didn't someone come up with a better way to toggle visibility without doing that?
'#' is being appended because it is the value of the href attribute. Simply remove the '#'. It won't look like a link anymore but it still functions as a link.
Just apply some CSS to make it look like a normal link.
(used in the same way)
var showRow = (navigator.appName.indexOf("Internet Explorer") != -1) ? "block" : "table-row";
function toggleVis(row) {
row.style.display = row.style.display=="none" ? showRow : "none";
}
function toggleVis(obj){
with(document.getElementById(obj).style){
if(display != 'none'){
display = 'none';
}else{
display = '';
}
}
}
<div id="toggled">Hi there!!!</div>
<a href="#" onclick="toggleVis('toggled');return false;">Toggle!</a>
So anyway, here's the good code.
<div id="toggled">Hi there!!!</div>
<a href="#" onclick="toggleVis('toggled');">Toggle!</a>
function toggleVis(obj) {
var el = document.getElementById(obj);
if ( el.style.display != 'none' )
{
el.style.display = 'none';
}
else
{
el.style.display = '';
}
}
Regards,
Kumar S
GuyFromChennai.com
Also, I noticed it appends the pound sign ("#") to the end of the URL when you click Toggle. Didn't someone come up with a better way to toggle visibility without doing that?
The "return false;" part will tell the browser not to follow the link.
-----------------------
http://jiart.org/
My digital playground with it's own sandbox.
Well anyway, I love programming
Just apply some CSS to make it look like a normal link.