title: Left menu toggle with image
body: <p>I have the following code.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
        &lt;title&gt;slide demo&lt;/title&gt;
           &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"&gt;
        &lt;style&gt;
          #toggle {
            width: 100px;
            height: 100px;
            background: #ccc;
          }
         &lt;/style&gt;
   &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
   &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;button id="mybutton"&gt;Show/Hide Left Slide Menu&lt;/button&gt;
   &lt;div id="toggle"&gt;&lt;/div&gt;
  
     &lt;script&gt;
      $('#mybutton').click(function () {
          $("#toggle").toggle("slide");
      });
  &lt;/script&gt;
  
     &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>I want to display an image(image1). When the user clicks on the image1, div should appear, image1 should hide and image2 should appear. When the user clicks on image2, div should hide, image2 should hide and image1 should appear. How can I do this? </p>