Bootstrap Snippet Show or Hide Options using HTML Bootstrap jQuery

"Show or Hide Options"
Bootstrap 3.3.0 Snippet by tarun90

3.3.0 jQuery

12.1K 5 Fav

Post to Facebook Tweet this

<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>  <!DOCTYPE html> <html lang="en"> <head> <title>Commercial Listing</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" /> <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script> <script src="toggle.js" type="text/javascript"></script> </head> <body style="background-color:ActiveBorder"> <form> <div class="row" style="text-align:center;"> <div style="display:inline-block; float:none; text-align:left; margin-right:auto;"> <div class="input-group"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary"> <input type="radio" name="options"> Sale </label> <label class="btn btn-primary"> <input type="radio" name="options"> Rent </label> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-sm-6"> <div class="input-group"> <span class="input-group-addon">Property Type </span> <select class="form-control" id="propertytype" onchange="ShowHideDiv()"> <option value="" disabled selected>Select Property Type</option> <option value="1">Office Space</option> <option value="1">Shop</option> <option value="1">Showroom</option> <option value="1">Retail Space</option> <option value="1">Space in IT Park</option> <option value="1">Space in Business Center</option> <option value="2">Commerical Plot/Land</option> </select> </div> </div> <script type="text/javascript"> function ShowHideDiv() { var propertytype = document.getElementById("propertytype"); var propertytypeselect = document.getElementById("propertytypeselect"); propertytypeselect.style.display = propertytype.value == "1" ? "block" : "none"; propertytypeselect2.style.display = propertytype.value == "2" ? "block" : "none"; } </script> <div id="propertytypeselect" style="display:1"> <div class="col-sm-6"> <div class="input-group"> <span class="input-group-addon">Builtup Area</span> <input type="number" id="Area" class="form-control"> </div> <a data-toggle="collapse" data-target="#carpet" href="#carpet" style="float:right; font-size:smaller">More/Less Area Option</a> </div> <div class="row"> <div id="carpet" class="panel-collapse collapse"> <div class="col-sm-6"> <div class="input-group"> <span class="input-group-addon">Carpet Area</span> <input type="text" class="form-control"> </div> </div> <div class="col-sm-6"> <div class="input-group"> <span class="input-group-addon">Plot Area</span> <input type="text" class="form-control"> </div> </div> </div> </div> <br /> <div class="row"> <div class="col-sm-6"> <div class="input-group"> <span class="input-group-addon">Total Floor</span> <select class="form-control" id="propertytype"> <option value="" disabled selected>Select Property on Floor</option> <option>Basement</option> <option>Ground</option> <option>Upper Ground</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> <option>11</option> <option>12</option> </select> </div> </div> <div class="col-sm-6"> <div class="input-group"> <span class="input-group-addon">Property on Floor</span> <select class="form-control" id="sel1"> <option value="" disabled selected>Select Property on Floor</option> <option>Basement</option> <option>Ground</option> <option>Upper Ground</option> <option>1st Floor</option> <option>2nd Floor</option> <option>3rd Floor</option> <option>4th Floor</option> <option>5th Floor</option> <option>6th Floor</option> <option>7th Floor</option> <option>8th Floor</option> <option>9th Floor</option> <option>10th Floor</option> <option>11th Floor</option> <option>12th Floor</option> </select> </div> </div> </div> <br /> <div class="row"> <div class="col-sm-3"> <div class="input-group"> <span class="input-group-addon">Washroom</span> <select class="form-control" id="washroomtype" onchange="ShowHideDiv2()"> <option value="" disabled selected>Select Washroom</option> <option value="nowashroom">None</option> <option>Attached</option> <option>Common</option> <option value="Both">Attached and Common</option> </select> </div> </div> <script type="text/javascript"> function ShowHideDiv2() { var washroomtype = document.getElementById("washroomtype"); var washroomtypeselect = document.getElementById("washroomtypeselect"); washroomtypeselect.style.display = washroomtype.value == "nowashroom" ? "block" : "none"; washroomtypeselect1.style.display = washroomtype.value == "Attached" ? "block" : "none"; washroomtypeselect2.style.display = washroomtype.value == "Common" ? "block" : "none"; washroomtypeselect3.style.display = washroomtype.value == "Both" ? "block" : "none"; } </script> <div id="washroomtypeselect" style="display: nowashroom"> <div class="col-sm-3"> <div class="input-group"> <span class="input-group-addon">No of Washroom</span> <select disabled class="form-control" id="sel1"> <option></option> </select> </div> </div> </div> <div id="washroomtypeselect1" style="display: none"> <div class="col-sm-3"> <div class="input-group"> <span class="input-group-addon">Attached</span> <select class="form-control" id="sel1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>5+</option> </select> </div> </div> </div> <div id="washroomtypeselect2" style="display: none"> <div class="col-sm-3"> <div class="input-group"> <span class="input-group-addon">Common</span> <select class="form-control" id="sel1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>5+</option> </select> </div> </div> </div> <div id="washroomtypeselect3" style="display: none"> <div class="col-sm-3"> <div class="input-group"> <span class="input-group-addon">Attach</span> <select class="form-control" id="sel1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>5+</option> </select> <span class="input-group-addon">Common</span> <select class="form-control" id="sel1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>5+</option> </select> </div> </div> </div> <div class="col-sm-6"> <div class="input-group"> <span class="input-group-addon">Power Backup</span> <select class="form-control" id="sel1"> <option value="" disabled selected>Select Power Backup</option> <option>No Power Backup</option> <option>Fully</option> <option>Partially</option> </select> </div> </div> </div> <br /> <div class="row"> <div class="col-sm-6"> <div class="input-group"> <span class="input-group-addon">Price</span> <input type="number" value="" min="0" step="1" id="propprice" class="form-control" placeholder="Price"> <span class="input-group-addon">₹</span> <span class="input-group-addon"> <div class="checkbox" style="padding-left: 0px; margin:0px;"> <label> <input type="checkbox" value="on" style="position: absolute;visibility: visible;" name="p_negotiable"> Negotiable </label> </div> </span> </div> <a data-toggle="collapse" data-target="#price" href="#price" style="float:right; font-size:smaller">More/Less Price Option</a> </div> <div class="col-sm-6"> <div class="input-group"> <span class="input-group-addon">Facing</span> <select class="form-control" id="sel1"> <option value="" disabled selected>Select Facing</option> <option>East</option> <option>West</option> <option>North</option> <option>South</option> </select> </div> </div> </div> <div class="row"> <div id="price" class="panel-collapse collapse"> <div class="col-sm-6"> <div class="input-group"> <span class="input-group input-group-addon">Price Per</span> <input disabled type="number" name="priceper" class="form-control" value="" placeholder="Price Per Sq.Yrd" /> </div> </div> <div class="col-sm-6"> <div class="input-group"> <span class="input-group-addon">Maintainance</span> <input type="text" class="form-control" placeholder="Enter Amount"> <span class="input-group-addon">₹</span> </div> </div> <div class="col-sm-6" style="padding-top:10px"> <div class="input-group"> <span class="input-group-addon">Brokerage</span> <input type="text" class="form-control" placeholder="Enter Amount"> <span class="input-group-addon">₹</span> </div> </div> <div class="col-sm-6" style="padding-top:10px"> <div class="input-group"> <span class="input-group-addon">Booking Amount</span> <input type="text" class="form-control" placeholder="Enter Amount"> <span class="input-group-addon">₹</span> </div> </div> </div> </div> <br /> <div class="row"> <div class="col-sm-12"> <textarea placeholder="description (50 characters)" min="50" max="60" class="form-control" name="p_description"> </textarea> </div> </div> <br /> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#filterPanel">Property Status</a> <span class="pull-right panel-collapse-clickable" data-toggle="collapse" data-parent="#accordion" href="#filterPanel"> <i class="glyphicon glyphicon-chevron-down"></i> </span> </h3> </div> <div id="filterPanel" class="panel-collapse collapse in"> <div class="panel-body"> <div class="row"> <div class="col-sm-6"> <div class="input-group"> <span class="input-group-addon">Transaction Type</span> <select class="form-control" id="propertytype"> <option value="" disabled selected>Select Transaction Type</option> <option>New</option> <option>Resale</option> </select> </div> </div> <div class="col-sm-6"> <div class="input-group"> <span class="input-group-addon">Ownership Type</span> <select class="form-control" id="sel1"> <option value="" disabled selected>Select Ownership Type</option> <option>Freehold</option> <option>Power of Attorney</option> <option>Leasehold</option> <option>Co-operative Society</option> </select> </div> </div> </div> <br /> <div class="row"> <div class="col-sm-6"> <div class="input-group"> <span class="input-group-addon">Availability</span> <select class="form-control" id="availability" onchange="ShowHideDiv3()"> <option value="UnderConstruction">Under Construction</option> <option value="ReadytoMove">Ready to Move</option> </select> </div> </div> <script type="text/javascript"> function ShowHideDiv3() { var availability = document.getElementById("availability"); var availabilityselect = document.getElementById("availabilityselect"); availabilityselect.style.display = availability.value == "ReadytoMove" ? "block" : "none"; availabilityselect2.style.display = availability.value == "UnderConstruction" ? "block" : "none"; } </script> <div class="col-sm-6"> <div id="availabilityselect" style="display: none"> <div class="input-group"> <span class="input-group-addon">Age of Property</span> <select class="form-control" id="sel1"> <option>New Property</option> <option>0 to 2 years</option> <option>2 to 5 years</option> <option>5 to 10 years</option> <option>More than 10 years</option> </select> </div> </div> <div id="availabilityselect2"> <div class="input-group"> <span class="input-group-addon">Possession By</span> <input class="form-control" id="date" name="date" placeholder="Enter Possession Date" type="text" /> </div> </div> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#filterPane2">Additional Detail</a> <span class="pull-right panel-collapse-clickable" data-toggle="collapse" data-parent="#accordion" href="#filterPane2"> <i class="glyphicon glyphicon-chevron-down"></i> </span> </h3> </div> <div id="filterPane2" class="panel-collapse collapse in"> <div class="panel-body"> <div class="row"> <div class="col-sm-6"> <div class="input-group"> <label> <b>Furnishing: </b> </label> <label class="radio-inline"> <input type="radio" name="optradio" id="unfurnished">Unfurnished </label> <label class="radio-inline"> <input type="radio" name="optradio" if="Semifurnished">Semifurnished </label> <label class="radio-inline"> <input type="radio" name="optradio" id="Furnished">Furnished </label> </div> </div> </div> <br /> <script type="text/javascript"> $(function () { $('#multicheck').multiselect({ includeSelectAllOption: true, enableFiltering: true, enableCaseInsensitiveFiltering: true, buttonWidth: '100%', filterPlaceholder: 'Search Amenities', }); }); </script> <script type="text/javascript"> $(function () { $('#multicheck2').multiselect({ includeSelectAllOption: true, enableFiltering: true, enableCaseInsensitiveFiltering: true, buttonWidth: '100%', filterPlaceholder: 'Search Furnishing', }); }); </script> <div class="row"> <div class="col-sm-6"> <div class="input-group"> <span class="input-group-addon">Amenities</span> <select id="multicheck" multiple="multiple"> <option value="1">Security / Fire Alarm</option> <option value="2">Centrally Air Conditioned</option> <option value="3">Lift(s)</option> <option value="4">Security Personnel</option> <option value="5">Cafeteria / Food Court</option> <option value="6">Visitors Parking</option> <option value="7">Service / Goods Lift</option> <option value="8">Maintainance Staff</option> <option value="9">Wifi</option> <option value="10">Eatrhquake Resistant</option> <option value="11">Conferance Room</option> <option value="12">Intercom facility</option> <option value="13">Fitness centre / Gym</option> <option value="14">Water Sotrage</option> </select> </div> </div> <div class="col-sm-6"> <div class="input-group"> <span class="input-group-addon">Furnishing</span> <select id="multicheck2" multiple="multiple"> <option value="1">CCTV</option> <option value="2">Air Conditioner</option> <option value="3">Furniture</option> <option value="4">PC Desktop</option> <option value="5">Projector</option> <option value="6">LED Screen</option> <option value="7">Refrigrator</option> <option value="8">Water Dispenser</option> </select> </div> </div> </div> <br /> <div class="row"> <div class="col-sm-6"> <div class="input-group"> <span class="input-group-addon">Car Parking</span> <select class="form-control" id="carparking" onchange="ShowHideDiv6()"> <option value="" disabled selected>Car Parking Type</option> <option value="noparking">None</option> <option>Open</option> <option>Covered</option> <option value="Both">Open and Covered Both</option> </select> </div> </div> <script type="text/javascript"> function ShowHideDiv6() { var carparking = document.getElementById("carparking"); var carparkingselect = document.getElementById("carparkingselect"); carparkingselect.style.display = carparking.value == "noparking" ? "block" : "none"; carparkingselect1.style.display = carparking.value == "Open" ? "block" : "none"; carparkingselect2.style.display = carparking.value == "Covered" ? "block" : "none"; carparkingselect3.style.display = carparking.value == "Both" ? "block" : "none"; } </script> <div id="carparkingselect" style="display: noparking"> <div class="col-sm-6"> <div class="input-group"> <span class="input-group-addon">No of Car Parking</span> <select disabled class="form-control" id="sel1"> <option></option> </select> </div> </div> </div> <div id="carparkingselect1" style="display: none"> <div class="col-sm-6"> <div class="input-group"> <span class="input-group-addon">No. of Open</span> <select class="form-control" id="sel1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>5+</option> </select> </div> </div> </div> <div id="carparkingselect2" style="display: none"> <div class="col-sm-6"> <div class="input-group"> <span class="input-group-addon">No. of Covered</span> <select class="form-control" id="sel1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>5+</option> </select> </div> </div> </div> <div id="carparkingselect3" style="display: none"> <div class="col-sm-6"> <div class="input-group"> <span class="input-group-addon">No. of Open</span> <select class="form-control" id="sel1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>5+</option> </select> <span class="input-group-addon">No. of Covered</span> <select class="form-control" id="sel1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>5+</option> </select> </div> </div> </div> </div> </div> </div> </div> </div> <div id="propertytypeselect2" style="display:none"> <div class="col-sm-6"> <div class="input-group"> <span class="input-group-addon">Plot Area</span> <input type="text" class="form-control"> </div> </div> <br /> <br /> <br /> <div class="row"> <div class="col-sm-6"> <div class="input-group"> <span class="input-group-addon">Open Side</span> <select class="form-control" id="propertytype"> <option value="" disabled selected>Select Open Sides</option> <option>1 Side Open</option> <option>2 Side Open</option> <option>3 Side Open</option> <option>4 Side Open</option> </select> </div> </div> <div class="col-sm-6"> <div class="input-group"> <span class="input-group-addon">Total Floor Allowed</span> <select class="form-control" id="sel1"> <option value="" disabled selected>Select Floor Allowed</option> <option>Basement</option> <option>Ground</option> <option>Upper Ground</option> <option>1st Floor</option> <option>2nd Floor</option> <option>3rd Floor</option> <option>4th Floor</option> <option>5th Floor</option> <option>6th Floor</option> <option>7th Floor</option> <option>8th Floor</option> <option>9th Floor</option> <option>10th Floor</option> <option>11th Floor</option> <option>12th Floor</option> </select> </div> </div> </div> <br /> <div class="row"> <div class="col-sm-6"> <div class="input-group"> <span class="input-group-addon">Facing</span> <select class="form-control" id="sel1"> <option value="" disabled selected>Select Facing</option> <option value="nowashroom">East</option> <option>West</option> <option>North</option> <option>South</option> </select> </div> </div> <div class="col-sm-6"> <div class="input-group"> <span class="input-group-addon">Facing Road Width</span> <input type="text" class="form-control" /> </div> </div> </div> <br /> <div class="row"> <div class="col-sm-6"> <div class="input-group"> <span class="input-group-addon">Price</span> <input type="number" value="" min="0" step="1" id="propprice" class="form-control" placeholder="Price"> <span class="input-group-addon">₹</span> <span class="input-group-addon"> <div class="checkbox" style="padding-left: 0px; margin:0px;"> <label> <input type="checkbox" value="on" style="position: absolute;visibility: visible;" name="p_negotiable"> Negotiable </label> </div> </span> </div> <a data-toggle="collapse" data-target="#price1" href="#price1" style="float:right; font-size:smaller">More/Less Price Option</a> </div> <div class="col-sm-6"> <div class="input-group"> <span class="input-group input-group-addon">Price Per</span> <input disabled type="text" class="form-control" value="" placeholder="Price Per Sq.Yrd" /> </div> </div> </div> <div class="row"> <div id="price1" class="panel-collapse collapse"> <div class="col-sm-4"> <div class="input-group"> <span class="input-group-addon">Maintainance</span> <input type="text" class="form-control" placeholder="Enter Amount"> <span class="input-group-addon">₹</span> </div> </div> <div class="col-sm-4"> <div class="input-group"> <span class="input-group-addon">Brokerage</span> <input type="text" class="form-control" placeholder="Enter Amount"> <span class="input-group-addon">₹</span> </div> </div> <div class="col-sm-4"> <div class="input-group"> <span class="input-group-addon">Booking Amount</span> <input type="text" class="form-control" placeholder="Enter Amount"> <span class="input-group-addon">₹</span> </div> </div> </div> </div> <br /> <div class="row"> <div class="col-sm-12"> <textarea placeholder="description (50 characters)" min="50" max="60" class="form-control" name="p_description"> </textarea> </div> </div> <br /> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#filterPane3">Property Status</a> <span class="pull-right panel-collapse-clickable" data-toggle="collapse" data-parent="#accordion" href="#filterPane3"> <i class="glyphicon glyphicon-chevron-down"></i> </span> </h3> </div> <div id="filterPane3" class="panel-collapse collapse in"> <div class="panel-body"> <div class="row"> <div class="col-sm-6"> <div class="input-group"> <span class="input-group-addon">Transaction Type</span> <select class="form-control" id="propertytype"> <option value="" disabled selected>Select Transaction Type</option> <option>New</option> <option>Resale</option> </select> </div> </div> <div class="col-sm-6"> <div class="input-group"> <span class="input-group-addon">Ownership Type</span> <select class="form-control" id="sel1"> <option value="" disabled selected>Select Ownership Type</option> <option>Freehold</option> <option>Power of Attorney</option> <option>Leasehold</option> <option>Co-operative Society</option> </select> </div> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#filterPane2">Additional Detail</a> <span class="pull-right panel-collapse-clickable" data-toggle="collapse" data-parent="#accordion" href="#filterPane2"> <i class="glyphicon glyphicon-chevron-down"></i> </span> </h3> </div> <div id="filterPane2" class="panel-collapse collapse in"> <div class="panel-body"> <script type="text/javascript"> $(function () { $('#multicheck3').multiselect({ includeSelectAllOption: true, enableFiltering: true, enableCaseInsensitiveFiltering: true, buttonWidth: '100%', filterPlaceholder: 'Search Amenities', }); }); </script> <div class="row"> <div class="col-sm-6"> <div class="input-group"> <span class="input-group-addon">Amenities</span> <select id="multicheck3" multiple="multiple"> <option value="1">Security / Fire Alarm</option> <option value="2">Centrally Air Conditioned</option> <option value="3">Lift(s)</option> <option value="4">Security Personnel</option> <option value="5">Cafeteria / Food Court</option> <option value="6">Visitors Parking</option> <option value="7">Service / Goods Lift</option> <option value="8">Maintainance Staff</option> <option value="9">Wifi</option> <option value="10">Eatrhquake Resistant</option> <option value="11">Conferance Room</option> <option value="12">Intercom facility</option> <option value="13">Fitness centre / Gym</option> <option value="14">Water Sotrage</option> </select> </div> </div> </div> </div> </div> </div> </div> </div> </div> </form> </body> </html>

$(document).ready(function () { $("#watch-me").click(function() { $("#show-me:hidden").show('slow'); $("#show-me-two").hide(); $("#show-me-three").hide(); }); $("#watch-me").click(function() { if($('watch-me').prop('checked')===false) { $('#show-me').hide(); } }); $("#see-me").click(function() { $("#show-me-two:hidden").show('slow'); $("#show-me").hide(); $("#show-me-three").hide(); }); $("#see-me").click(function() { if($('see-me-two').prop('checked')===false) { $('#show-me-two').hide(); } }); $("#look-me").click(function() { $("#show-me-three:hidden").show('slow'); $("#show-me").hide(); $("#show-me-two").hide(); }); $("#look-me").click(function() { if($('see-me-three').prop('checked')===false) { $('#show-me-three').hide(); } }); });

Questions / Comments:

Posting GuidelinesFormatting

good

kasthurirajauix () - 7 years ago - Reply -1