Forum Moderators: not2easy
<HTML>
<head>
<style type="text/css">
#addSubscriptionHidden {
display:none;
}
#removeSubscriptionHidden {
display:none;
}
</style>
</head>
<body>
Add Subscription(s)
<input type="radio" name="subscription" id="addSubscription" onClick="document.getElementById('addSubscriptionHidden').style.display='block'" onBlur="document.getElementById('addSubscriptionHidden').style.display='none'">
Remove Subscription(s)<input type="radio" name="subscription" id="removeSubscription" onClick="document.getElementById('removeSubscriptionHidden').style.display='block'" onBlur="document.getElementById('removeSubscriptionHidden').style.display='none'">
<br>
<br>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td><div id=addSubscriptionHidden>
Add Subscription Form
</div>
<div id=removeSubscriptionHidden>
Remove Subscription Form
</div></td>
</tr>
</table>
</body>
</html>
<html>
<head>
<style type="text/css">
#addSubscriptionHidden {
display:none;
}
</style>
</head> <body>
Add Subscription(s)
<input type="checkbox" name="subscription" id="addSubscription" onClick="document.getElementById('addSubscriptionHidden').style.display='block'">
<br>
<br>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td><div id=addSubscriptionHidden>
Add Subscription Form
</div>
</td>
</tr>
</table>
</body>
</html>
In your second example, you're on the right track, but you need some code to check to see whether or not the checkbox is checked after the user clicks.
For example:
<input type="checkbox" name="subscription" id="addSubscription" onclick="toggle();">Add this to your <head> section (sorry for the spacing issues, the forum eats the formatting even when surrounded by code tags):
<script type="text/javascript">
function toggle() {
if (document.getElementById) {
if (document.getElementById("addSubscription").checked == true) {
document.getElementById("addSubscriptionHidden").style.display = "block";
} else {
document.getElementById("addSubscriptionHidden").style.display = "none";
}
}
}
</script>This is really rough and should be cleaned up (get rid of inline event handlers, etc.) before you put it in production, but I think it does what you want?
I presume this type of function can't really be accomplished with pure CSS then? I was afraid of customers who may have Javascript disabled not being able to utilize this function.
Thanks again!
