I'm building a form that first asks if you have '
foo'. If
the answer is 'Yes', a div appears and asks 'How many
foo do you have'? Based on
the quantity answered, I'd like to show only that many divs. Thus if
the user answers 1, only
the first div will show. If they answer three,
the first three will show. I have it set so that if
the user answers no,
the question of
the amount remains hidden, but if they answer yes, they would be prompted for
the quantity. This is what I've got so far...
<script type="text/javascript">
$(document).ready(function(){
$(window).load(function() {
$('#amt_of_foo,.foo_panels').hide();
});
$('#yes_foo').click(function() {
$('#amt_of_foo').show();
});
$('#no_foo').click(function() {
$('.foo_panels,#amt_of_foo').hide();
});
});
</script>
</head>
<body>
<ul>
<li>
<div class="panel section_panel">
<h2>Questions About Your Foo</h2>
<span>Do you have foo?:</span>
<input type="radio" name="
foo" id="no_foo" /> No <br />
<input type="radio" name="
foo" id="yes_foo" /> Yes:</span></span>
<span id="amt_of_foo">
<span>How many
foo do you have?:</span>
<span><input id="qty_of_foo" type="text" size="5" />
</span>
</span>
</div>
</li>
<!--answered yes to
foo, and entered amount-->
<div class="foo_panels">
<li>
<li>
<div class="panel foo_1">
<h1>First
foo's information</h1>
<span>Foo name: <input type="text" size="20" /></span>
</div>
</li>
<li>
<div class="panel foo_2">
<h1>Second
foo's information</h1>
<span>Foo name: <input type="text" size="20" /></span>
</div>
</li>
<li>
<div class="panel foo_3">
<h1>Third
foo's information</h1>
<span>Foo name: <input type="text" size="20" /></span>
</div>
</li>
</div>
<!--answered no to foo-->
<li>
<div class="panel">
<h1>Next Question, if no foo</h1>
</div>
</li>
</ul>
The ul is used for a jQuery 'slider' plugin.
the 'panel' class is used for global css.
