I am trying to hide a section based on the result of a Yes/No radio button selection where yes is true and no is false. I have it to where if the user selects a button, the field is shown, but it does it for both yes or no, also if the user clicks the no, it should remain hidden(which it doesn't). Thanks for any help.
Here is the JQuery code
$(document).ready(function () {
$('input[type="radio"]').click(function () {
if ($(this).prop('#ImportPartRadio', true)) {
$('#ImportPartQuestions').show();
}
else if ($(this).prop('#ImportPartRadio', false)){
$('#ImportPartQuestions').hide();
}
});
});
Here is the div sections
@*import parts radio button*@
<div class="span-18 last" id="ImportPart">
<table class="item-display">
<tr>
<td class="label required" id="ImportPartRadio">
<div class='tooltip'>Is this an import part?<span class="tooltiptext">This information can be used to calssify the part for US Customs purposes.</span></div></td>
<td class="value" colspan="5">
Yes: @Html.RadioButtonFor(model => model.ImportPart, true)
No: @Html.RadioButtonFor(model => model.ImportPart, false)
</td>
</tr>
</table>
</div>
@*This table is for full procurement and sales procurement setup only*@
<div class="span-18 last" id="ImportPartQuestions">
<table class="item-display">
<tr>
<td class="label">If an import, what is the material and function of part?</td>
<td colspan="5" class="value">
@Html.TextAreaFor(model => model.MaterialAndFunction, new { @placeholder = "Description Here", maxLength = 300 })
@Html.ValidationMessageFor(model => model.MaterialAndFunction)
</td>
</tr>
</table>
</div>
I have been googling for hours and can't seem to find a solution the works, this is as close as any of them come to fully working.
$(document).ready(function() {
$('input[name="ImportPart"]').change(function() {
var radioValue = $(this).val();
var questionsDiv = $('#ImportPartQuestions');
if (radioValue == "True") {
questionsDiv.show();
} else {
questionsDiv.hide();
}
});
});
OR using .toggle( display )
$('input[name="ImportPart"]').change(function() {
$('#ImportPartQuestions').toggle(this.value === "True");
});