I have a lot of divs under eachother and when I a value is selected and true I want another div to show. I know I can make this with javascript but how do I make it with razor?

Here is some 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;" })
                            3
                            @Html.RadioButtonFor(model => model.HowManyNights, new { style = "width: 1000px; height:50px; overflow:hidden;" })
                            4
                            @Html.RadioButtonFor(model => model.HowManyNights, new { style = "width: 1000px; height:50px; overflow:hidden;" })
                            <br />
                            5
                            @Html.RadioButtonFor(model => model.HowManyNights, new { style = "width: 1000px; height:50px; overflow:hidden;" })
                            6
                            @Html.RadioButtonFor(model => model.HowManyNights, new { style = "width: 1000px; height:50px; overflow:hidden;" })
                            7
                            @Html.RadioButtonFor(model => model.HowManyNights, new { style = "width: 1000px; height:50px; overflow:hidden;" })
                            8
                            @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 people click I will attend then the div "Hotel" should show and so on.

Thankful for all help.

Related posts

Recent Viewed