Using javascript, show a certain amount of divs based on an answer
- by Adam
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.
