title: Using jQuery with HTML Text Links to Show/Hide Multiple DIVs
body: <p>I'm creating a menu page for a local restaurant. At the top of the page of text based links for each portion of the menu such as:</p>
  
  <p>Appetizers |  Soups and Salads | Entrees</p>
  
  <p>The HTML markup for these is:</p>
  
  <pre><code>&lt;a id="show_apps"&gt;Appetizers&lt;/a&gt; | &lt;a id="show_soups"&gt;Soups and Salads&lt;/a&gt; | &lt;a id="show_entrees"&gt;Entrees&lt;/a&gt;
  </code></pre>
  
  <p>My CSS is setup like this:</p>
  
  <pre><code>#menu_container{
    width: 650px;
    height: auto;
    padding-left: 30px;
  }
  
  #menu_container div{display:none;}
  </code></pre>
  
  <p>And the Menu Sections are setup like this</p>
  
  <pre><code>&lt;div id="menu_container"&gt;
    &lt;div id="menu_apps"&gt;
      Content of the App Section Here
    &lt;/div&gt;
    &lt;div id="menu_soups"&gt;
      Content of the Soups Section Here
    &lt;/div&gt;
    &lt;div id="menu_entrees"&gt;
      Content of the Entrees Section Here
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I am trying to find a solution for is when someone clicks on the link for each section it will show that DIV but if they click on another section, it will replace the currently viewed div with the next one. Example: User clicks on "Appetizers" and that DIV loads then clicks on "Soups and Salads" and the "Appetizers" DIV is closed and the "Soups" DIV is shown, so that multiple divs aren't visible at once. I have been toying around with show(), hide(), and even toggle() but I can't figure out how to get the end result of clicking on the other links to re-hide and ONLY show the targeted DIV. I hope this makes sense.</p>
  
  <p>TIA for any insight!</p>