Hi,
I have a form where a customer choose from "option radio" a pizza : mini - medium - maxi.
I have topping with checkbox: toppingmini for pizza mini, toppingmedium for pizza medium and toppingmaxi for pizza maxi.
A customer when click on radio "pizza medium" display only toppingmedium..... It's all right now.
But, if the customer choose pizza maxi, is not wonderful see the form with big space height:
pizza mini
pizza medium
pizza maxi
toppingmaxi:
ham
salami
olives
How can I display toppingmaxi near(top) the "radio" pizza size?
div id="option-229" class="option">
<span class="required">*</span>
<b>pizzasize:</b><br />
<input type="radio" name="option[229]" value="25" id="option-value-25" />
<label for="option-value-25">mini (+$67.00)
</label>
<br />
<input type="radio" name="option[229]" value="24" id="option-value-24" />
<label for="option-value-24">medium (+$55.00)
</label>
<br />
<input type="radio" name="option[229]" value="26" id="option-value-26" />
<label for="option-value-26">maxi (+$44.00)
</label>
<br />
</div>
<br />
<div id="option-230" class="option">
<b>toppingmini:</b><br />
<input type="checkbox" name="option[230][]" value="21" id="option-value-21" />
<label for="option-value-21">ham (+$7.00)
</label>
<br />
<input type="checkbox" name="option[230][]" value="22" id="option-value-22" />
<label for="option-value-22">olives (+$12.00)
</label>
<br />
<input type="checkbox" name="option[230][]" value="23" id="option-value-23" />
<label for="option-value-23">salami (+$16.00)
</label>
<br />
</div>
<br />
<div id="option-231" class="option">
<b>toppingmaxi:</b><br />
<input type="checkbox" name="option[231][]" value="27" id="option-value-27" />
<label for="option-value-27">ham 200 (+$66.00)
</label>
<br />
<input type="checkbox" name="option[231][]" value="28" id="option-value-28" />
<label for="option-value-28">salami 200 (+$88.00)
</label>
<br />
</div>
<br />
<div id="option-232" class="option">
<b>toppinmedium:</b><br />
<input type="checkbox" name="option[232][]" value="29" id="option-value-29" />
<label for="option-value-29">ham 100gr (+$38.00)
</label>
<br />
<input type="checkbox" name="option[232][]" value="31" id="option-value-31" />
<label for="option-value-31">salami 100gr (+$49.00)
</label>
<br />
<input type="checkbox" name="option[232][]" value="30" id="option-value-30" />
<label for="option-value-30">olives 100gr (+$93.00)
</label>
<br />
</div>
<br />
</div>
<script type="text/javascript"><!--
$(document).ready(function() {
$('[name*="option[229]"]').click(function() {
$('#option-230').css('visibility', $('#option-value-25').attr('checked') ? 'visible':'hidden');
});
$('[name*="option[229]"]').click(function() {
$('#option-232').css('visibility', $('#option-value-24').attr('checked') ? 'visible':'hidden');
});
$('[name*="option[229]"]').click(function() {
$('#option-231').css('visibility', $('#option-value-26').attr('checked') ? 'visible':'hidden');
});
});
//--></script>