title: display div if option is selected in jquery with css selectors
body: <p>I have a drop down list with 4 surface type options. The fist option is the default and is a shown div with input boxes for user to enter dimensions, the rest of the other options are hidden on page load via css. Currently, if I select a non-rectangle option, it does not hide the default div and show the hidden div. 
  Here's the html:</p>
  
  <pre><code>    &lt;div class="calc-wrap"&gt;
      &lt;h3&gt;Soil and Mulch&lt;/h3&gt;
      &lt;label for="surface"&gt;Type of surface:&lt;/label&gt;
  
     &lt;select id="surface" name="surface" onchange="selected_surface('calc_id', this.value)"&gt;
      &lt;option value="_rect" selected="selected"&gt;Rectangle&lt;/option&gt;
      &lt;option value="_circle"&gt;Circle&lt;/option&gt;
      &lt;option value="_ring"&gt;Ring&lt;/option&gt;
      &lt;option value="_triangle"&gt;Triangle&lt;/option&gt;
  &lt;/select&gt;
  
      &lt;div class="user-inputs"&gt;
      &lt;div id="rectangle"&gt;
  
          &lt;div class="calc-input"&gt;
              &lt;label for="length"&gt;&lt;strong&gt;Length&lt;/strong&gt;(ft):&lt;/label&gt;
              &lt;input id="length" name="length" text="text" /&gt;
          &lt;/div&gt;&lt;!--end of calc-input--&gt;
  
          &lt;div class="calc-input"&gt;
              &lt;label for="width"&gt;&lt;strong&gt;Width&lt;/strong&gt; (ft):&lt;/label&gt;
              &lt;input id="width" name="width" type="text" /&gt;
          &lt;/div&gt;&lt;!--end of calc-input--&gt;
      &lt;/div&gt;&lt;!--end of rectangle--&gt;
  
      &lt;div class="hidden_field" id="circle"&gt;
          &lt;div class="calc-input"&gt;
              &lt;label for="radius"&gt;&lt;strong&gt;Radius&lt;/strong&gt;(ft.):&lt;/label&gt;
              &lt;input id="radius" name="radius" type="text" /&gt;
          &lt;/div&gt;&lt;!--end of calc-input--&gt;
      &lt;/div&gt;&lt;!--end of circle--&gt;
  
      &lt;div class="hidden_field" id="ring"&gt;
          &lt;div class="calc-input"&gt;
              &lt;label for="in_diameter"&gt;&lt;strong&gt;Inside Diameter&lt;/strong&gt;(ft.):&lt;/label&gt;
              &lt;input id="in_diameter" name="indiameter" type="text" /&gt;
          &lt;/div&gt;&lt;!--end of calc-input--&gt;
          &lt;div class="calc-input"&gt;
              &lt;label for="ex_diameter"&gt;&lt;strong&gt;Outer Diameter&lt;/strong&gt;(ft.):&lt;/label&gt;
              &lt;input id="ex_diameter" name="exdiameter" type="text" /&gt;
          &lt;/div&gt;&lt;!--end of calc-input--&gt;
  &lt;/div&gt;&lt;!--end of ring--&gt;
  
      &lt;div class="hidden_field" id="triangle"&gt;
              &lt;div class="calc-input"&gt;
                  &lt;label for="base"&gt;&lt;strong&gt;Base&lt;/strong&gt;(ft.):&lt;/label&gt;
                  &lt;input id="base" name="base" type="text" /&gt;
              &lt;/div&gt;&lt;!--end of calc-input--&gt;
              &lt;div class="calc-input"&gt;
                  &lt;label for="height"&gt;&lt;strong&gt;Height&lt;/strong&gt;(ft.):&lt;/label&gt;
                  &lt;input id="height" name="height" type="text" /&gt;
              &lt;/div&gt;&lt;!--end of calc-input--&gt;
          &lt;/div&gt;&lt;!--end of triangle--&gt;
  
  
          &lt;div class="calc-input" id="soil_mulch_depth"&gt;
              &lt;label for="soil_mulch_depth"&gt;&lt;strong&gt;Depth&lt;/strong&gt;(inches):&lt;/label&gt;
              &lt;input id="soil_mulch_depth" name="depth" type="text" /&gt;
          &lt;/div&gt;&lt;!--end of soil_mulch_depth--&gt;
  &lt;/div&gt;&lt;!--end user_inputs--&gt;
  
          &lt;div class="results"&gt;
              &lt;div class="calc-result"&gt;
                  &lt;label&gt;&lt;strong&gt;Volume&lt;/strong&gt;(yards&amp;sup3;)&lt;/label&gt;
                  &lt;div class="result-value" id="soil_mulch_result"&gt;&lt;/div&gt;
              &lt;/div&gt;&lt;!--end calc-result--&gt;
              &lt;br&gt;
              &lt;div class="calc-result"&gt;
                  &lt;label&gt;&lt;strong&gt;Number of bags&lt;/strong&gt;:&lt;/label&gt;
                  &lt;div class="result-value" id="soil_bags_needed"&gt;0&lt;/div&gt;
                  &lt;label&gt;of soil&lt;/label&gt;
                  &lt;input class="soil_parts" id="bags_soil" name="bags_soil" type="hidden" value="25" /&gt;
              &lt;/div&gt;&lt;!--end result-value--&gt;
              &lt;br&gt;
              &lt;div class="calc-result"&gt;
                  &lt;label&gt;&lt;strong&gt;Number of bags:&lt;/strong&gt;
  
                  &lt;/label&gt;
                  &lt;div class="result-value" id="mulch_bags_needed"&gt;0&lt;/div&gt;&lt;!--end result-value--&gt;
                  &lt;label&gt;of mulch&lt;/label&gt;
                  &lt;input class="mulch_parts" id="bags_mulch" name="bags_mulch" type="hidden" value="9" /&gt;
              &lt;/div&gt;
              &lt;br&gt;
              &lt;button class="calc-submit" onclick="bulk_calculate(" soil_mulch ",0)"&gt;Calculate&lt;/button&gt;
  </code></pre>
  
  <p>Here's the css:</p>
  
  <pre><code>.hidden_field {
      display:none;
  }
  
  .user-inputs {
      float:left;
      margin-right:20px;
  }
  .results {
      float:left;
  }
  .calc-wrap {
     margin:30px 0;
     line-height:1;
  }
  .calc-wrap select {
     margin:0;
  }
  .calc-wrap input {
     margin:0 0 9px;
     font-family:arial;
     width:100px;
  }
  .calc-submit {
     clear:both;
     display:block;
  }
  .calc-wrap label {
      display:inline-block;
      vertical-align:middle;
      width:170px;
      font-size: 14px;
  }
  .calc-result label {
      width:auto;
      white-space:nowrap;
  }
  .result-value {
      display:inline-block;
      vertical-align:middle;
  }
  .calc-wrap h3 {
      font-weight:bold;
      color: #8dc63f;
      font-family:'Tahoma', sans-serif;
  
  }
  </code></pre>
  
  <p>Here's the jquery:</p>
  
  <pre><code>    function selected_surface(calc_id, show_id){
      $ = jQuery;
      $('#' + calc_id + '_rect').css('display', 'none');
      $('#' + calc_id + '_circle').css('display', 'none');
      $('#' + calc_id + '_ring').css('display', 'none');
      $('#' + calc_id + '_triangle').css('display', 'none');
      $('#' + calc_id + '_manual').css('display', 'none');
      $('#' + calc_id + show_id).css('display', 'block');
      }
  </code></pre>
  
  <p>see my fiddle here: <a href="http://jsfiddle.net/rnle99/8nKFg/5/" rel="nofollow noreferrer">http://jsfiddle.net/rnle99/8nKFg/5/</a></p>
  
  <p>I've tried looking at previous questions such as:</p>
  
  <p><a href="https://stackoverflow.com/questions/11502335/show-div-once-selected-option-pass-from-drop-down-menu">show DIV once selected option PASS from drop down menu</a></p>
  
  <p><a href="https://stackoverflow.com/questions/14325548/display-div-if-option-is-selected-in-jquery">Display div if option is selected in jQuery</a></p>