I have 4 boxes, labeled a,b,c,d. When the user selects box a, specific content should be loaded:
If image a is picked, load content 1
If image b is picked, load content 2
If image c is picked, load content 3
If image d is picked, load content 4
I want all content to remain hidden until the radio button is clicked. Currently, everything is concealed but clicking on the radio button does not display any content.
Thank you!
<div id="framework">
<div class="element">
<img style="float:left;" src="img/left.png" />
<img style="padding-left:25px; float:left;" src="img/right.png" />
<img style="padding-left:25px; float:left;" src="img/both.png" />
<img style="padding-left:25px; float:left;" src="img/without.png" />
</div>
<form class="actions">
<div style="clearfix:none;" class="confirm">
<input type="radio" id="frame_left" name="framework">
</div>
<div style="clearfix:none;" class="confirma">
<input type="radio" id="frame_right" name="framework">
</div>
<div style="clearfix:none;" class="confirmb">
<input type="radio" id="frame_both" name="framework">
</div>
<div style="clearfix:none;" class="confirmc">
<input type="radio" id="frame_without" name="framework">
</div>
</form>
</div>
<script>
$(document).ready(function() {
// check radio buttons here and show/hide content accordingly
$("#navLeft").hide();
$("#navRight").hide();
if ($("#frame_left:checked").length > 0) {
$("#navLeft").hide();
}
// add onclick functionality here
$("#frame_left").click(function() {
$("#navleft").show();
});
$("#frame_right").click(function() {
$("#navRight").hide();
});
});
</script>
<img id="navLeft" src="img/left.png" />
<img id="navRight" src="img/right.png" />
</div>