title: How to hide a current div and show a new div on clicking a button
body: <p>I have links on the left sidebar and corresponding content in the right sidebar, arranged in proper div's. </p>
  
  <p>I want to show one div at a time when you click the links on the left. can anyone help me on this thing? </p>
  
  <p>The HTML is like this : </p>
  
  <pre><code>&lt;div id="sidebar2"&gt;
         &lt;div id="companyimage"&gt;&lt;img src="siteimages/imagetest.jpg"&gt;&lt;/div&gt;
         &lt;div id="historyimage"&gt;&lt;img src="siteimages/imagetest2.jpg"&gt;&lt;/div&gt;
         &lt;div id="awardsimage"&gt;&lt;img src="siteimages/imagetest3.jpg"&gt;&lt;/div&gt;
         &lt;div id="publications"&gt;&lt;img src="siteimages/imagetest4.jpg"&gt;&lt;/div&gt;
         &lt;div id="portfolio"&gt; Embedded a Issu pdf here . &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>The links are present in the sidebar 1.</p>
  
  <p>I used jquery, and was able to hide one and show any other one. But I don't know what to do if one clicks random links. I need to hide the current div and show the corresponding div.</p>
  
  <p>The script i used was : </p>
  
  <pre><code>&lt;script&gt;
     $(document).ready(function(){
     $("#showpublications").click(function(){
     $("#companyimage").hide();
     $("#publications").fadeIn(1500);
     });
   });
  &lt;/script&gt;  
  </code></pre>
  
  <p>Any kind of help will be highly appreciated! </p>