Hi all,
I'm new here, so hi to everybody
I just ran into a surprising problem with a script to toggle the visibility of an element.
Here's the code I used:
Code:
function toggle(object) {
var element = document.getElementById(object);
if (element.style.display == 'block') {
element.style.display = 'none';
} else {
element.style.display = 'block';
}
if (element.style.display == 'block');
}
Pretty standard I guess.
It used to work just fine the first time I set it up. Now I wanted to use it on another website, set everything up, but when I tested it, it toggled the visibility of the triggering link instead of the element with the specified id, e.g.:
Code:
<a href="#" onclick="toggle( 'someID' ); return false;">Toggle</a>
In the above example, instead of showing the element with the id "someID" the link text would be hidden after clicking on "Toggle".
Here's the page where I originally used this code:
http://www.kulturinsel-celle.de/?content=musiker
Clicking on any of the pictures or any of the "Biographie"-Links should show a hidden div containing some text. Clicking on that text div would toggle again and hide it.
When I first uploaded everything it worked as expected, and now it doesn't anymore, which is driving me nuts because I didn't change anything about it.
Tested with Firefox & Google Chrome on Linux and with IE8 on WinXP.
Ideas, anyone?
Thanks
Edit:
I just created this little html-file:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Toggle</title>
<meta name="GENERATOR" content="Quanta Plus">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
// toggle visibility
function toggle(object) {
var element = document.getElementById(object);
if (element.style.display == 'block') {
element.style.display = 'none';
} else {
element.style.display = 'block';
}
if (element.style.display == 'block');
}
</script>
</head>
<body>
<div id="hide" style="display:none;">This Text is hidden.</div>
<a href="#" onclick="toggle( 'hide' ); return false;">Show/Hide.</a>
</body>
</html>
Everything works as expected.
On the page at the link above it's not working, although I don't find a difference in the JS part.
