Using .slideToggle to pull a hidden div up from the bottom

Question

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.

cheers!

Here's what I'm working with

the script:

$(document).ready(function() {
  $('#clientsOpen').click(function() {
     $('#clientsDropDown #clientsDashboard').slideToggle({ direction: "up" }, 300);
 $(this).toggleClass('clientsClose'); 
  }); // end click
});

the markup:

<div id="clientsDropDown">
<div id="clientsDashboard">
    <p id="clientsCTA">Let's make something beautiful together...<br /><a href="mailto:[email protected]">[email protected]</a></p>
</div><!-- /clientsDashboard -->
<p id="clientsOpen">clients</p>
</div><!-- //clientsDropDown -->

The style:

#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;  
}

Answer 1

Just add position:absolute; to #clientsDropDown.

jsFiddle example

Or if you want "clients" to sit on top of the popup div, remove the float and position the paragraph above the dashboard div like in this jsFiddle example.

Answer 2

Try changing your script to:

$("#clientsOpen").click(function(){
    $("#clientsDashboard").slideToggle();
}, function(){
    $("#clientsDashboard").slideToggle();
});

Yes and of course position the container div to absolute.