This pattern repeats 9 times with a different radio button group each time. I am using the jquery slideDown function to make the hidden textareas appear if the yes button is clicked, but I can not figure out how to write it so it only refers to the radio button group currently clicked. Currently when I click a Yes radio button, all 9 textareas appear, but I only want the textarea associated with the Radio group to appear. Here is some code:
$(document).ready(function () {
$(".commentBox").click(function () {
if ($('input[name=$(this)]:checked').val() == "Yes") {
$(".hidden, this").slideDown(800);
} else {
$(".hidden, this").slideUp("fast");
}
});
});
<div id="HistoryQ">
<div class="formQuestion">
<div class="editor-label">
@Html.LabelFor(model => model.HistoryModel.AbuseComment)
</div>
<div class="editor-field">
@Html.RadioButtonFor(model => model.HistoryModel.ChildAbusePast, "Yes", new { @class = "commentBox" } )
@Html.RadioButtonFor(model => model.HistoryModel.ChildAbusePast, "No", new { @class = "commentBox" })
@Html.ValidationMessageFor(model => model.HistoryModel.ChildAbusePast)
</div>
<div class="hidden">
<textarea class="abuseComment" cols="5" rows="4"></textarea>
</div>
</div>
<div class="formQuestion">
<div class="editor-label">
@Html.LabelFor(model => model.HistoryModel.CurrentAbuseComment)
</div>
<div class="editor-field">
@Html.RadioButtonFor(model => model.HistoryModel.ChildAbuseCurrent, "Yes", new { @class = "commentBox" })
@Html.RadioButtonFor(model => model.HistoryModel.ChildAbuseCurrent, "No", new { @class = "commentBox" })
@Html.ValidationMessageFor(model => model.HistoryModel.ChildAbuseCurrent)
</div>
<div class="hidden">
<textarea class="abuseComment" cols="5" rows="4"></textarea>
</div>
</div>
I am pretty sure it has something to do with the THIS keyword being used incorrectly. Anywho, thank you for reading my post.