bodymoves
05-05-2006, 03:17 PM
hi,
im trying to build a form where if a person checks a checkbox then 2 (or more) hidden divs appear throughout the page.
example:
test [ ] checked
display div here
and here
can anyone help me with this.
heres the code that i have so far:
<html>
<head>
<title>untitled</title>
<style type="text/css">
div#breakfast, div#lunch, div#dinner {
width: 600px;
font: 200 12px helvetica,sans-serif;
margin: 10px 0px 0px 40px;
padding: 3px;
border: 1px silver solid;
display: none;
}
</style>
<script type="text/javascript" language="javascript">
function displayPanel(oCheckbox) {
var bWhich = oCheckbox.checked;
if (el = document.getElementById(oCheckbox.value))
el.style.display = (bWhich) ? 'block' : 'none';
}
</script>
</head>
<body>
<form>
<br>
<a href="http://www.codingforums.com/archive/index.php?t-23501.html%20" target="_blank">http://www.codingforums.com/archive/index.php?t-23501.html
</a>
<h3>Which part of the event did you attend?</h3>
<input type="checkbox" name="section" value="breakfast" onclick="displayPanel(this)" /> breakfast<br />
<input type="checkbox" name="section" value="lunch" onclick="displayPanel(this)" /> lunch<br />
<input type="checkbox" name="section" value="dinner" onclick="displayPanel(this)" /> dinner<br /><br />
<div id="breakfast">
breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast
</div>
<div id="lunch">
lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch
</div>
<div id="dinner">
dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner
</div>
<div id="breakfast">
breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast
</div>
<br>
hello
</form>
</body>
</html>
im trying to build a form where if a person checks a checkbox then 2 (or more) hidden divs appear throughout the page.
example:
test [ ] checked
display div here
and here
can anyone help me with this.
heres the code that i have so far:
<html>
<head>
<title>untitled</title>
<style type="text/css">
div#breakfast, div#lunch, div#dinner {
width: 600px;
font: 200 12px helvetica,sans-serif;
margin: 10px 0px 0px 40px;
padding: 3px;
border: 1px silver solid;
display: none;
}
</style>
<script type="text/javascript" language="javascript">
function displayPanel(oCheckbox) {
var bWhich = oCheckbox.checked;
if (el = document.getElementById(oCheckbox.value))
el.style.display = (bWhich) ? 'block' : 'none';
}
</script>
</head>
<body>
<form>
<br>
<a href="http://www.codingforums.com/archive/index.php?t-23501.html%20" target="_blank">http://www.codingforums.com/archive/index.php?t-23501.html
</a>
<h3>Which part of the event did you attend?</h3>
<input type="checkbox" name="section" value="breakfast" onclick="displayPanel(this)" /> breakfast<br />
<input type="checkbox" name="section" value="lunch" onclick="displayPanel(this)" /> lunch<br />
<input type="checkbox" name="section" value="dinner" onclick="displayPanel(this)" /> dinner<br /><br />
<div id="breakfast">
breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast
</div>
<div id="lunch">
lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch
</div>
<div id="dinner">
dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner
</div>
<div id="breakfast">
breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast
</div>
<br>
hello
</form>
</body>
</html>