title: Show Only One Element with JQuery
body: <p>I need to show only one element at a time when a link is clicked on. Right now I'm cheating by hiding everything again and then toggling the element clicked on. This works, unless i want EVERYTHING to disappear again. Short of adding a "Hide All" button/link what can i do? I would like to be able to click on the link again, and hide it's content.</p>
  
  <p>EDIT: Pseudo's code would have worked, but the html here mistakenly led you to believe that all the links were in one div. instead of tracking down where they all were, it is easier to call them by their ID.</p>
  
  <p>Here's what I have so far:</p>
  
  <pre><code>$(document).ready(function(){
      //hides everything
      $("#infocontent *").hide();
  
      //now we show them by which they click on
      $("#linkjoedhit").click(function(event){
        $("#infocontent *").hide();
        $("#infojoedhit").toggle();
        return false;
      });
  
      $("#linkgarykhit").click(function(event){
        $("#infocontent *").hide();
        $("#infogarykhit").toggle();
        return false;
      });
  
  });
  </code></pre>
  
  <p>and the html looks like:</p>
  
  <pre><code>&lt;div id="theircrappycode"&gt;
      &lt;a id="linkjoedhit" href=""&gt;Joe D&lt;/a&gt;&lt;br/&gt;
      &lt;a id="linkgarykhit" href=""&gt;Gary K&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div id="infocontent"&gt;
      &lt;p id="infojoedhit"&gt;Information about Joe D Hitting.&lt;/p&gt;
      &lt;p id="infogarykhit"&gt;Information about Gary K Hitting.&lt;/p&gt;
  &lt;/div
  </code></pre>
  
  <p>there are about 20 links like this. Because I am not coding the actual html, I have no control over the actual layout, which is horrendous. Suffice to say, this is the only way to organize the links/info.</p>