I'm currently working on changing the visibility of the second div that has the class .form-group. I'm using jQuery to get the selected option value and then adjust the visibility based on that value.
If the value is 0, then the second div .form-group should appear visible. I've faced some challenges with this task and have attempted to use parents() and closest(), but I think my implementation has been incorrect.
Below is the HTML snippet for context:
<div class="form-group">
<label class="control-label required" for="userQuestions[1]">Do you have any dietary requirements? <span class="required">*</span></label><select class="form-control user-success" id="userQuestions_1" name="userQuestions[1]" required="required">
<option value="">
Please select
</option>
<option value="0">
Yes
</option>
<option value="1">
No
</option>
</select>
</div>
<div class="form-group">
<label class="control-label" for="userQuestions[2]">Would you like to stay for after conference drinks?</label><select class="form-control" id="userQuestions_2" name="userQuestions[2]">
<option value="">
Please select
</option>
<option value="0">
Yes
</option>
<option value="1">
No
</option>
</select>
</div>
And here's the jQuery code snippet:
$(document).ready(function(){
$('#useQuestion[1]').change(function(){
if($(this).val() == '0'){
$('.form-group:nth-of-type(2)').addClass('visible');
}
});
});
Lastly, the corresponding CSS styles are as follows:
.form-group:nth-of-type(2) {
visibility: hidden;
}
.visible {
visibility: visible !important;
}