I have an MVC C# Web Application and have a text area input field that needs to be hidden when the page loads. I also have a drop down input field that a user picks a value from the drop down list. What I'm trying to do is if the user selects "Free Text" option with a value of "55" from (add_Time_Description_ID) input, the div area (divTimeNotes) becomes visible. So...this div area will toggle hidden/unhide based on the drop down selection. If page loads and the drop down does not = 55, div is hidden. I'd like to do this with Javascript but am having issues accomplishing. Can someone assist. See input names below:
<div class="row mg-t-20">
<label class="col-sm-5 form-control-label">Time Description:</label>
<div class="col-sm-6 mg-t-10 mg-sm-t-0">
<select name="Time_Description_ID" id="add_Time_Description_ID" class="form-control" required>
<option value="">Select a Time Description</option>
@{
foreach (TimeDescription timeDescription in Model.TimeDescriptions)
{
<option value="@timeDescription.Time_Description_ID">@timeDescription.Time_Name</option>
}
}
</select>
</div>
<label class="col-sm-1 form-control-label"><span class="tx-danger">*</span></label>
</div>
<div class="row mg-t-20" id="divTimeNotes" style="display:none;">
<label class="col-sm-5 form-control-label">Time Notes:</label>
<div class="col-sm-6 mg-t-10 mg-sm-t-0">
<textarea name="Time_Notes" id="add_Time_Notes" class="form-control" style="min-height:200px;" placeholder="Description"></textarea>
</div>
<label class="col-sm-1 form-control-label"></label>
</div>