title: Show extra form input fields when an html select option is clicked
body: <p>I want a selection of text fields to become visible when a  option is selected (and to hide others) unfortunately my attempts at JavaScript are terrible.</p>
  
  <p>aaa selected xxx, yyy visible
  bbb selected xxx, zzz visible
  ccc selected yyy, zzz visible</p>
  
  <h2>CSS Code:</h2>
  
  <pre><code>.aaa, .bbb, .ccc {
      display:none;
  }
  </code></pre>
  
  <h2>HTML Code:</h2>
  
  <pre><code>&lt;select  onchange="showExtra(this)"&gt;
    &lt;option&gt;Select&lt;/option&gt;
    &lt;option value="aaa"&gt;AAA&lt;/option&gt;
    &lt;option value="bbb"&gt;BBB&lt;/option&gt;
    &lt;option value="ccc"&gt;CCC&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div class="aaa bbb"&gt;
    &lt;input name="xxx" type="text" /&gt;
  &lt;/div&gt;
   &lt;div class="aaa ccc"&gt;
    &lt;input name="yyy" type="text" /&gt;
  &lt;/div&gt;
    &lt;div class="bbb ccc"&gt;
  &lt;input name="zzz" type="text" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>JavaScript Code:</h2>
  
  <pre><code>function showExtra(option)
  {
     var divClass = option.value;
     $(divClass:not).hide();
     $divClass.slideDown('medium');
  }
  </code></pre>