I have 32 different iframe url's I want displayed to the right of a set of input selections. The first is BOYS or GIRLS, and the second is their GRADE. Depending on the combo, I'd like to pull up the corresponding iframe to the right of it.
How would I go about this? All I have so far are the buttons I'd like involved. The iframe box would be that height, and would give the entire thing a width of about 1000px.
Any help is greatly appreciated.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(function() {
$( "#radio" ).buttonset();
});
</script>
<script>
$(function() {
$( "#radiox" ).buttonset();
});
</script>
<style>
body {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: 62.5%;
}
.radioA label [
width:250px;
]
</style>
<form>
<div id="radio">
<input type="radio" id="radio1" name="radio" checked="checked"><label for="radio1" style="width:100px;">BOYS</label>
<input type="radio" id="radio2" name="radio"><label for="radio2" style="width:100px;">GIRLS</label>
</div>
</form>
<br>
<form>
<div id="radiox">
<input type="radio" id="radioA" name="radio" checked="checked"><label for="radioA" style="width:100px;">12th Grade</label>
<input type="radio" id="radioB" name="radio"><label for="radioB" style="width:100px;">11th Grade</label><br>
<input type="radio" id="radioC" name="radio"><label for="radioC" style="width:100px;">10th Grade</label>
<input type="radio" id="radioD" name="radio"><label for="radioD" style="width:100px;">9th Grade</label><br>
<input type="radio" id="radioE" name="radio"><label for="radioE" style="width:100px;">8th Grade</label>
<input type="radio" id="radioF" name="radio"><label for="radioF" style="width:100px;">7th Grade</label><br>
<input type="radio" id="radioG" name="radio"><label for="radioG" style="width:100px;">6th Grade</label>
<input type="radio" id="radioH" name="radio"><label for="radioH" style="width:100px;">5th Grade</label><br>
<input type="radio" id="radioI" name="radio"><label for="radioI" style="width:100px;">4th Grade</label>
<input type="radio" id="radioJ" name="radio"><label for="radioJ" style="width:100px;">3rd Grade</label><br>
<input type="radio" id="radioK" name="radio"><label for="radioK" style="width:100px;">2nd Grade</label>
<input type="radio" id="radioL" name="radio"><label for="radioL" style="width:100px;">1st Grade</label><br>
<input type="radio" id="radioM" name="radio"><label for="radioM" style="width:100px;">7 Year Olds</label>
<input type="radio" id="radioN" name="radio"><label for="radioN" style="width:100px;">6 Year Olds</label><br>
<input type="radio" id="radioO" name="radio"><label for="radioO" style="width:100px;">5 Year Olds</label>
<input type="radio" id="radioP" name="radio"><label for="radioP" style="width:100px;">4 Year Olds</label><br>
</div>
</form>
