The Javascript code seems to be ignoring the CSS display property, even though it's set in the style sheet. I added a debugger statement and noticed that the display value was empty. I've been staring at this for some time now, so I must be overlooking something obvious.
<html>
<head>
<style type="text/css">
div#image{ display: none; }
div#url { display: none; }
</style>
<script type="text/javascript">
function toggleVisibility(id) {
debugger;
var imageStyle = document.getElementById('image').style;
var urlStyle = document.getElementById('url').style;
alert(document.getElementById("image").style.display); // debug for stack
if ( id == "image" ) {
if ( imageStyle.display == "none" ) {
imageStyle.display = "block";
urlStyle.display = "none";
}
}
if ( id == "url" ) {
if ( urlStyle.display == "none" ) {
urlStyle.display = "block";
imageStyle.display = "none";
}
}
}
</script>
</head>
<body>
<form method="post" action="create.php">
<input type="hidden" name="formType" value="create">
<input type="radio" name="type" value="image" onClick="toggleVisibility('image');"> Image <input type="radio" name="type" value="url" onClick="toggleVisibility('url');"> URL
<div id="image">
Image div
</div>
<div id="url">
URL div
</div>
</form>
</body>
</html>