title: hide and show panel with jQuery
body: <p>I wonder how can i hide the attached panel in a way that only the red button to be shown on the left side of the browser's window and when i click on the red button to appear the whole panel. If i click again on the red button, the panel to disappear again on the left side of the browser's window?</p>
  
  <p><img src="https://i.stack.imgur.com/jePfi.png" alt="panel"></p>
  
  <p>I know i should use absolute positioning related to a relative positioned wrapper div, but that's all my idea...</p>
  
  <pre><code>&lt;div class="wrapper"&gt;&lt;div id="panel"&gt;&lt;/div&gt;&lt;!-- #panel --&gt;&lt;p&gt;content&lt;/p&gt;&lt;/div&gt;&lt;!-- .wrapper --&gt;
  
  .wrapper {position: relative; margin: 0 auto; width: 800px; height: 500px;}
  
  #panel {position: absolute; left: -150px; top: 50px;}
  </code></pre>