Trying to toggle the visibility of a div based on another div's input has proven to be quite challenging in this scenario.
Here is the HTML setup:
<div id="main-question">
<div class="form-group">
<div class="form-radios">
<div class="radio">
<label class="control-label"><input type="radio" name="ad" value="option1" class="form-radio" />option 1</label>
</div>
<div class="radio">
<label class="control-label"><input type="radio" name="ad" value="option2" class="form-radio" />option 2</label>
</div>
<div class="radio">
<label class="control-label"><input type="radio" name="ad" value="option3" checked="checked" class="form-radio" />option 3</label>
</div>
</div>
</div>
<div class="form-group">
<div class="form-radios">
<div class="radio">
<label class="control-label"><input type="radio" name="ad" value="optiona" class="form-radio" />option a</label>
</div>
<div class="radio">
<label class="control-label"><input type="radio" name="ad" value="optionb" class="form-radio" />option b</label>
</div>
<div class="radio">
<label class="control-label"><input type="radio" name="ad" value="optionc" checked="checked" class="form-radio" />option c</label>
</div>
</div>
</div>
</div>
<div id="next-form">
<!-- code -->
</div>
An attempt was made to utilize a module that controls the group visibility based on a drop-down selection. However, all other groups remain hidden with a display:none; property while the visible one displays with display:block;. The following script was used (among many variations) without success:
<script>
(function ($) {
$('#main-question .form-group').each(function() {
if ( ($(this).css('display') === 'block') && ($(this).find('[type=radio]').val() !== '') ) {
$('div#next-form').show(400);
}
});
})(jQuery);
</script>
There is uncertainty regarding how to trigger this functionality when the select box changes as well since it