title: Show one <div> and hide another
body: <p>I have two <code>&lt;div&gt;</code> elements:</p>
  
  <pre><code>&lt;div id="hidden"&gt; 
  
  &lt;div id="hideitem"&gt;
  &lt;input id="item5" type="radio" class="item" name="item" value="gen"/&gt;General Function
  &lt;/div&gt;
  </code></pre>
  
  <p>I set <code>&lt;div id="hidden"&gt;</code> to <code>display:none</code>.  I want it to show when the radio button is clicked:</p>
  
  <pre><code>$("#item5").click(function() {
      $("#hidden").show();
  }
  </code></pre>
  
  <p>But how can I hide <code>&lt;div id="hideitem"&gt;</code> after <code>&lt;div id="hidden"&gt;</code> is shown?</p>