title: Show/Hide different forms based on a option selected
body: <p>I would like to know how to show/hide different forms based one form's selection.</p>
  
  <p>In the sample code below all three forms are automatically set to display:none. I would like to only show one of the "hidden" forms if its corresponding value is selected from the "shower" form. So if option "Form 1" is selected from the "shower" form, then show Form 1 below; if option "Form 2" is selected from the "shower" form, then show Form 2; and so on.</p>
  
  <p>Preferably with a fade in/out animation to it or another light animation.</p>
  
  <p>Here is a sample...</p>
  
  <pre><code>&lt;form id="form-shower"&gt;
  &lt;select&gt;
  &lt;option value="" selected="selected"&gt;&lt;/option&gt;
  &lt;option value="form_name1"&gt;Form 1&lt;/option&gt;
  &lt;option value="form_name2"&gt;Form 2&lt;/option&gt;
  &lt;option value="form_name3"&gt;Form 3&lt;/option&gt;
  &lt;/select&gt;
  &lt;/form&gt;
  
  &lt;form name="form_name1" id="form_1" style="display:none"&gt;
  &lt;!---- THIS IS FORM 1----&gt;
  &lt;/form&gt;
  
  &lt;form name="form_name2" id="form_2" style="display:none"&gt;
  &lt;!---- THIS IS FORM 2----&gt;
  &lt;/form&gt;
  
  &lt;form name="form_name3" id="form_3" style="display:none"&gt;
  &lt;!---- THIS IS FORM 3----&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Thanks for any help with this.</p>