title: hide/show of a div on selection of radio button
body: <p>this is my html code</p>
  
  <pre><code>&lt;div class="wrapper"&gt; &lt;strong&gt;Space portion&lt;/strong&gt;
  
  &lt;br /&gt;
  &lt;input type="radio" name="rdSpace" value="RJ" /&gt;Space 1
  &lt;br /&gt;
  &lt;input type="radio" name="rdSpace" value="SM" /&gt;Space 2
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;/div&gt;
  &lt;div class="wrapper"&gt; &lt;strong&gt; Template&lt;/strong&gt;
  
  &lt;br /&gt;
  &lt;input type="radio" name="rdTemplate" value="uploadTemplate" /&gt;Upload your own file
  &lt;label class="cabinet"&gt;
      &lt;input style="margin-left:10px;" type="file" name="user_upload_template"
      class="uploader" id="file"&gt;
      &lt;br /&gt;
      &lt;input type="radio" name="rdTemplate" value="preExisting" /&gt;Choose below
      &lt;div id="RJ" class="tempDisp"&gt;Div 1 Preview&lt;/div&gt;
      &lt;div id="SM" class="tempDisp"&gt;Div 2 Preview&lt;/div&gt;
  </code></pre>
  
  <p>this is jquery code</p>
  
  <pre><code>$(document).ready(function () {
  $("div.tempDisp").hide();
  $('[id="' + $(":radio:checked").val() + '"]').show();
  $('input[name="rdSpace"]:radio,input[name="rdTemplate"]').click(function () {
      $("div.tempDisp").fadeOut('slow');
      $('[id="' + $(this).val() + '"]').fadeIn('slow');
  });
  });
  </code></pre>
  
  <p>the purpose of jquery code is to display "Div 1 Preview" on selection of "Space 1" radio and to display "Div 2 Preview" on selection of "Space 2" radio.. till now it is working fine</p>
  
  <p>now I tried to add the functionality of hiding "Div 1 Preview" and "Div 2 Preview" on selection of "Upload your own file" radio.. I got success and on selection of said button those are hiding.. but the problem is that they are not displayed back when I click back "Choose below" radio.. why?? </p>
  
  <p>here is the fiddle
  <a href="http://jsfiddle.net/bTM66/" rel="nofollow">http://jsfiddle.net/bTM66/</a></p>