title: Alternative way to do onclick hide/show function
body: <p>I have a javascript that on each value on dropdown will hide/show specific fields.</p>
  
  <p>On my case i have 17 values on my dropdown. then I have hide/show 100 field base on drop down values.</p>
  
  <p>My script works fine but the problem is script is too long.</p>
  
  <p>Please check my script below</p>
  
  <pre><code>   &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
  $('#inputOption_1_2').on('change',function(){
  if( $(this).val()==="Apartment" ){
      //Unitinfo
  $('#20').show(); //bedroom
  $('#19').show(); //bathroom
  $('#1176').show(); //type of floorplan
  $('#1063').show(); //no. of parking
  $('#1177').show(); //Indoor Area
  $('#1078').show(); //Balcony Area
  $('#1179').show(); //Terrace Area
  $('#1191').show(); //Price
  $('#1192').show(); //REF#
  $('#1193').show(); //RERA #
  $('#1194').hide(); //Storey
  $('#1195').hide(); //Plot Area
  $('#1196').hide(); //Hotel Brand
  $('#1197').hide(); //Built up Area
  $('#1198').hide(); //Type of use
  $('#1199').hide(); //Total Capacity
  $('#1200').hide(); //No of kitchen
  $('#1201').hide(); //No of dining
  $('#1172').hide(); //Total Area
  $('#1202').hide(); //Total Built up area
  $('#1203').hide(); //Total Plot Area
  $('#1071').hide(); //License Authority
  $('#1211').hide(); //Nature of Business
  $('#1212').hide(); //Total Price
  $('#1204').hide(); //Area
  //Decor
  $('#1000').hide(); //Furnish
  $('#1084').hide(); //Decoration
  $('#1085').hide(); //Kitchen Type
  $('#1087').hide(); //Floor Materials
  $('#1086').hide(); //Window type
  $('#1088').hide(); //Window Type
  $('#1091').show(); //Smart System
  $('#1089').hide(); //Private Garage
  $('#1013').hide(); //Private Swimming Pool
  $('#1006').show(); //Built in Wardrobe
  $('#1138').hide(); //BBQ Area
  $('#1205').hide(); //Bathroom Type
  $('#1061').hide(); //Fitted
  $('#1092').hide(); //Pantry
  $('#1206').hide(); //Shared Meeting Room
  $('#1207').hide(); //Shared Reception
  //View
  $('#1080').show(); //Main Direction
  $('#1136').show(); //Master Bed
  $('#1137').show(); //Other Bed
  $('#1167').show(); //Kitchen Direction
  $('#1166').show(); //Entrance
  $('#1181').show(); //Primary view
  $('#1182').show(); //View from Master bed
  $('#1183').show(); //View from Other bed
  $('#1168').show(); //Kitchen View
  //Brand
  $('#1140').show(); //Cooker   
  $('#1141').show(); //Fridge
  $('#1142').show(); //Washing Machine
  $('#1143').show(); //Dryer
  $('#1144').show(); //Dishwasher
  $('#1145').show(); //Floor
  $('#1146').show(); //Furniture
  $('#1147').show(); //Bathroom
  $('#1208').hide(); //Elevator
  //Status
  $('#1170').show(); //Rent Status
  $('#1193').show(); //Tenancy Vacating Letter
  $('#1095').show(); //Vacant on transfer
  $('#1148').show(); //Rent Period
  $('#1092').show(); //Expirty Date
  $('#1093').show(); //Vacating Letter
  $('#1094').show(); //Vacating Date
  //Building Info
  $('#1057').show(); //Building Name
  $('#7').hide(); //Community
  $('#1187').hide(); //Sub Community
  $('#1186').show(); //Master Community
  $('#1003').hide(); //Developer
  $('#1044').hide(); //Year Completion
  $('#1209').hide(); //Community Management 
  $('#1169').show(); //Building Management
  $('#1005').show(); //Annual Service Charge
  $('#1101').hide(); //Cooling System
  $('#1002').hide(); //Cooker Type
  $('#1103').hide(); //Total Floors
  $('#1104').hide(); //Building Heigts
  $('#1105').hide(); //Building Color
  $('#1106').hide(); //Ext Material
  }
  else if.....
  &lt;/script&gt;
  </code></pre>
  
  <p>Here's my html below</p>
  
  <pre><code>&lt;div class="col-lg-3" id="&lt;?php echo $val_option['id']; ?&gt;"&gt;
                  &lt;label class="control-label"&gt;&lt;?php echo $required_notice . $val_option['option'] ?&gt;&lt;?php if(!empty($options_lang[$key][$key_option]-&gt;hint)):?&gt;&lt;i class="icon-question-sign hint" data-hint="&lt;?php echo $options_lang[$key][$key_option]-&gt;hint;?&gt;"&gt;&lt;/i&gt;&lt;?php endif;?&gt;&lt;/label&gt;
  
                  &lt;div class="controls" &gt;
                      &lt;?php echo form_input('option' . $val_option['id'] . '_' . $key, set_value('option' . $val_option['id'] . '_' . $key, isset($estate['option' . $val_option['id'] . '_' . $key]) ? $estate['option' . $val_option['id'] . '_' . $key] : ''), 'class="form-control ' . $val_option['type'] . '" id="inputOption_' . $key . '_' . $val_option['id'] . '" placeholder="' . $val_option['option'] . '" ' . $required_text . ' ' . $max_length_text) ?&gt;
  
  
                  &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>Note: I hide my field using div id <strong>$val_optiond['id']</strong>
  Anyone have suggestion/alternative way to do this function?</p>
  
  <p>Because this method will takes time to do it and maintain I think.</p>
  
  <p>Thankyou!</p>