<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> </div> <select id="options" onchange="optionCheck()"> <option></option> <option value="show">Show Div</option> <option value="goto">Go To Google</option> </select> <div id="hiddenDiv" style="height:100px;width:300px;border:1px;visibility:hidden;"> I am visible now!</div> </div> <form name="" method="post" action="register-online-pdf.php"> <div class="col-sm-12 form-group"> <select name="payment_type" id="payment_type" onchange="optionCheck()" class="form-control select-insurance-information"> <option>--Select Payment Type *--</option> <option value="self-pay"> Self Pay </option> <option value="self-pay2"> Self Pay 2 </option> <option value="self-pay3"> Self Pay 3</option> <option value="insurance"> Insurance </option> </select> </div> <div id="insurance-information"> <div class="col-sm-12"> <h4>Insurance Information</h4> </div> <div class="col-sm-6 form-group"> <select name="insured" id="insured" class="form-control"> <option>--Select Your Relation to Insured *--</option> <option> Self </option> <option> Spouse </option> <option> Partner </option> <option> Child </option> <option> Other </option> </select> </div> <div class="col-sm-6 form-group"> <input type="text" name="insured_fname" id="insured_fname" class="form-control" placeholder="Insured First Name *"> </div> <div class="col-sm-6 form-group"> <input type="text" name="insured_lname" id="insured_lname" class="form-control" placeholder="Insured Last Name *"> </div> <div class="col-sm-6 form-group"> <input type="text" name="datepicker2" class="form-control" id="datepicker2" placeholder="Insured Date of Birth *"> </div> <div class="col-sm-6 form-group"> <select name="insurance" id="insurance" class="form-control"> <option>--Select Insurance *--</option> <option> 1199 </option> <option> AARP </option> <option> Aetna </option> <option> Blue Cross / Blue Shield </option> <option> Cigna </option> <option> Coventry </option> <option> GHI </option> <option> HIP </option> <option> Medicare </option> <option> Oxford Health </option> <option> The Empire Plan </option> <option> UMR </option> <option> United Healthcare </option> <option> Worker's Comp </option> <option> OTHER </option> </select> </div> <div class="col-sm-6 form-group"> <input type="text" name="member_id" id="member_id" class="form-control" placeholder="Member ID *"> </div> <div class="col-sm-6 form-group"> <input type="text" name="group_id" id="group_id" class="form-control" placeholder="Group ID"> </div> </div> </form>

#insurance-information { display:none;}

function optionCheck(){ var option = document.getElementById("options").value; if(option == "show"){ document.getElementById("hiddenDiv").style.visibility ="visible"; } if(option == "goto"){ window.location = "http://google.com"; } var option = document.getElementById("payment_type").value; if(option == "insurance"){ document.getElementById("insurance-information").style.display ="block"; } if(option == "self-pay"){ document.getElementById("insurance-information").style.display ="none"; } if(option == "self-pay2"){ document.getElementById("insurance-information").style.display ="none"; } if(option == "self-pay3"){ document.getElementById("insurance-information").style.display ="none"; } }