<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-6"> <form class="form-horizontal" id="sendEmail" name="sendEmail" method="POST" action="ProcessEmailModal.asp" autocomplete="off"> <input type="hidden" id="venueRef" name="venueRef"> <fieldset> <div class="form-group"> <label for="emailFrom" class="col-lg-2 control-label">From:</label> <div class="col-lg-10"> <select class="form-control" id="emailFrom" name="emailFrom"> <option data-emailaddress="sergio@tix.com" value="Sergio">Sergio Rodriguez (sergio@tix.com)</option> <option data-emailaddress="sergio@tix.com" value="Sergio">Sergio Rodriguez (sergio@tix.com)</option> <option data-emailaddress="sergio@tix.com" value="Sergio">Sergio Rodriguez (sergio@tix.com)</option> <option data-emailaddress="sergio@tix.com" value="Sergio">Sergio Rodriguez (sergio@tix.com)</option> <option data-emailaddress="sergio@tix.com" value="Serigo">Sergio Rodriguez (sergio@tix.com)</option> <option value="Other">Other</option> </select> </div> </div> <div class="form-group"> <label for="emailTo" class="col-lg-2 control-label">To:</label> <div class="col-lg-10"> <select class="form-control" id="emailTo" name="emailTo"> <option data-emailaddress="sergio@tix.com" value="Sergio">Sergio Rodriguez (sergio@tix.com)</option> <option data-emailaddress="sergio@tix.com" value="Sergio">Sergio Rodriguez (sergio@tix.com)</option> <option data-emailaddress="sergio@tix.com" value="Sergio">Sergio Rodriguez (sergio@tix.com)</option> <option data-emailaddress="sergio@tix.com" value="Sergio">Sergio Rodriguez (sergio@tix.com)</option> <option data-emailaddress="sergio@tix.com" value="Serigo">Sergio Rodriguez (sergio@tix.com)</option> <option value="other">Other</option> </select> </div> </div> <div id="emailAlt"> <div class="form-group"> <label for="emailName" class="col-lg-2 control-label">Name:</label> <div class="col-lg-5"> <input type="text" class="form-control" name="firstName" id="firstName" placeholder="First Name"> </div> <div class="col-lg-5"> <input type="text" class="form-control" name="lastName" id="lastName" placeholder="Last Name"> </div> </div> <div class="form-group"> <label for="emailAddress" class="col-lg-2 control-label">Email:</label> <div class="col-lg-10"> <input type="text" class="form-control" name="emailAddress" id="emailAddress" placeholder="Email Address"> </div> </div> </div> <div class="form-group"> <label for="emailSubject" class="col-lg-2 control-label">Subject:</label> <div class="col-lg-10"> <input type="text" class="form-control" name="emailSubject" id="emailSubject" size="35" placeholder="Subject"> </div> </div> </fieldset> </form> </div> </div> </div> </div>

$(document).ready(function () { toggleFields(); //call this first so we start out with the correct visibility depending on the selected form values //this will call our toggleFields function every time the selection value of our underAge field changes $("#emailName").change(function () { toggleFields(); }); }); //this toggles the visibility of our parent permission fields depending on the current selected value of the underAge field function toggleFields() { if ($("#emailName").val() == 'Other') $("#emailAlt").show(); else $("#emailAlt").hide(); }