How to make a panel toggle left/right?
<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>
