title: Jquery buttons to show/ hide images and text
body: <p>I build a website, in this website I have this two buttons by jQuery
   when I click on the bt1 the image appear and
   then I'll click on the btn2 the first image should dissapear and the second image for this button btn2 appear.</p>
  
  <p>The problem is 
   I click on btn1 and then click on btn2,  when I want to back to btn1 and click it, it not work.
  I have to perform a double click on each other, click to open image and the other to close.</p>
  
  <p>I want to click one time to see image and when i click on the second button the first image disappear and open the second image.</p>
  
  <p>And I want that image** appear when I open the website but when I click on any button (btn1,btn2) the image hide disappear.</p>
  
  <p>** 3rd image not for (btn1/btn2) but appear when i open my web n disappear when i click on any image 
  thank for help </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  
  &lt;script type="text/javascript"&gt;
  
  function showhide_menu(id){
     $("#" + id).toggle();
  }
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;button onclick="showhide_menu('btn1');"&gt;Show/Hide.  &lt;/button&gt;
  
   &lt;button onclick="showhide_menu('btn2');"&gt;Show/Hide.  &lt;/button&gt;
  
  &lt;div id="btn1" style="display:none;"&gt;
      &lt;img src="http://mybroadband.co.za/photos/data/500/apple-logo.jpg"/&gt;
      text text text text text text text text text....&lt;/div&gt;
  
  &lt;div id="btn2" style="display:none;"&gt;
      &lt;img src="http://www.inquisitr.com/wp-content/2012/02/breaking-dawn-saga.jpg"/&gt;
      text text text text text text text text text....&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>