title: Jquery slideDown on Button Click
body: <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>