title: How to make a panel toggle left/right?
body: <p>I have the following code, below it toggles up and down fine. but how can i make the panel to toggle left and right? I want the SLide Panel to show at the edge when closed and show at the expanded side when opened</p>
  
  <p>something like this but on the left instead of at the top. <a href="http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html" rel="nofollow">http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html</a></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function(){
  
      $(".btn-slide").click(function(){
          $("#panel").slideToggle("slow");
          //$("#panel").slideToggle("slow", {direction: "left"}, 100);
          $(this).toggleClass("active"); return false;
      });
  
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>&lt;style&gt;
  
  
  /** left sliding panel **/
  
  #panel {
  /** background: #754c24; */
      height: 500px;
      display: none;
  }
  .slide {
      margin: 0;
      padding: 0;
  /*  border-top: solid 4px #422410;  */
      background: url(images/btn-slide.gif) no-repeat center top;
  }
  .btn-slide {
      background: url(images/white-arrow.gif) no-repeat right -50px;
      text-align: center;
      width: 144px;
      height: 31px;
      padding: 10px 10px 0 0;
      margin: 0 auto;
  /*  display: block;  color: #fff;*/
      font: bold 120%/100% Arial, Helvetica, sans-serif;
  
      text-decoration: none;
  }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>Html</p>
  
  <pre><code>    &lt;div id="panel"&gt;
  
   content will be shown here.
  
      &lt;/div&gt; &lt;!--  end  Panel content--&gt;
  
      &lt;div id="openCloseWrap"&gt;
       &lt;p class="slide"&gt;&lt;a href="#" class="btn-slide"&gt;Slide Panel&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>