I have multiple divs stacked on top of each other, and I want another div to appear when a certain value is selected. I'm familiar with using JavaScript for this task, but how can I achieve it using Razor?
Below is a snippet of my code:
<div id="Attend">
@Html.DropDownListFor(model => model.AttendWedding, new[]
{
new SelectListItem() {Text = "Yes, I'll be there", Value = bool.TrueString },
new SelectListItem() {Text ="No, I can't come", Value = bool.FalseString }
}, "Choose an option")
</div>
<div id="Hotel">
@Html.DropDownListFor(model => model.WillStayAtHotel, new[]
{
new SelectListItem() {Text = "Yes, I will stay at the hotel", Value = bool.TrueString},
new SelectListItem() {Text ="No, I won't stay at the hotel", Value = bool.FalseString }
}, "Choose an option")
</div>
<div id="Nights">
@Html.LabelFor(model => model.HowManyNights, "How Many Nights?:", new { @class = "dob" })
1
@Html.RadioButtonFor(model => model.HowManyNights, new { style = "width: 1000px; height:50px; overflow:hidden;" })
2
@Html.RadioButtonFor(model => model.HowManyNights, new { style = "width: 1000px; height:50px; overflow:hidden;" })
...
</div>
<div id="When">
@Html.TextBoxFor(model => model.StartDate, "{mm/dd/yyyy}",new {@class="datepicker"})
@Html.TextBoxFor(model => model.EndDate, "{mm/dd/yyyy}", new { @class = "datepicker" })
</div>So, when someone selects "I will attend," the "Hotel" div should appear, and so forth.
Thank you for any assistance provided.