troubleshooting Question

Hide & Unhide Div Based on Drop Down Selection

Avatar of Stacey Fontenot
Stacey Fontenot asked on
.NET MVCCSSC#JavaScript
3 Comments1 Solution117 ViewsLast Modified:
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>
ASKER CERTIFIED SOLUTION
Zakaria Acharki
Analyst Developer
Join our community to see this answer!
Unlock 1 Answer and 3 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 3 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros