Jquery slideDown on Button Click
<p>I'm looking to have a slide(down) toggle but would like the panel to line up neatly along the left edge of the button. I don't want to hard code margin, position, px, etc but want the slide down panel to always be "in relation" to (and relative) the (left bottom of) button. </p>

<p>What am I missing?</p>

<pre><code>&lt;!doctype html&gt;
&lt;head&gt;
    &lt;script src='http://code.jquery.com/jquery-1.7.2.min.js'&gt;&lt;/script&gt;

&lt;style type="text/css"&gt;
    .slideToggleBox{
        float:left;
        padding:8px;
        margin:16px;
        border:1px solid red;
        width:200px;
        height:50px;
        background-color:blue;
        color:white;
        position:fixed;
        left:-10.5px;
        top:2.3%;
    }
    .clear{
        clear:both;
    }
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;div class="clear"&gt;
     &lt;button id=slideToggle&gt;slideToggle()&lt;/button&gt;
    &lt;br/&gt;
    &lt;div class="slideToggleBox"&gt;
        slideToggle()
    &lt;/div&gt;
&lt;/div&gt;

&lt;script type="text/javascript"&gt;
$("#slideToggle").click(function () {
   $('.slideToggleBox').slideToggle();
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
