title: Using .slideToggle to pull a hidden div up from the bottom
body: <p>I can't seem to figure out how to reveal hidden content from the bottom up as opposed to from the top down. I've done some homework on here and came across a solution from jQuery UI, but must be implementing it wrong. Any help is greatly appreciated - new to scripting.</p>
  
  <p>cheers!</p>
  
  <p>Here's what I'm working with</p>
  
  <p>the script:</p>
  
  <pre><code>$(document).ready(function() {
    $('#clientsOpen').click(function() {
       $('#clientsDropDown #clientsDashboard').slideToggle({ direction: "up" }, 300);
   $(this).toggleClass('clientsClose'); 
    }); // end click
  });
  </code></pre>
  
  <p>the markup:</p>
  
  <pre><code>&lt;div id="clientsDropDown"&gt;
  &lt;div id="clientsDashboard"&gt;
      &lt;p id="clientsCTA"&gt;Let's make something beautiful together...&lt;br /&gt;&lt;a href="mailto:brockman.eric@gmail.com"&gt;brockman.eric@gmail.com&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;&lt;!-- /clientsDashboard --&gt;
  &lt;p id="clientsOpen"&gt;clients&lt;/p&gt;
  &lt;/div&gt;&lt;!-- //clientsDropDown --&gt;
  </code></pre>
  
  <p>The style:</p>
  
  <pre><code>#clientsDropDown {
      bottom:0;
  width: 100%;
  padding-bottom:2%;
  z-index: 100;
  }
  
  #clientsOpen {
  background: url("images/open.png") no-repeat scroll 68px 10px #414142;
  color: #ececec;
  cursor: pointer;
  float: left;
  font-size: 26px;
  margin: -2px 0 0 10%;
  padding: 0 15px 2px;
  text-decoration: none;
  width: 63px;
  }
  
  #clientsCTA {
  background:#414142;
  width:100%;
  color: #CCCCCC;
  text-align:center;
  font-size: 46px;
  margin: 0;
  padding: 30px 0;
  text-decoration: none;
  
  }
  
  #clientsDropDown .clientsClose {
  background-image: url(images/close.png);
  }
  
  #clientsDropDown #clientsDashboard {
  display: none;  
  }
  </code></pre>