CODEWITHSUNDEEP
jqueryjquery-uislidetoggle
Eric Brockman
Eric Brockman

Reputation: 854

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

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

Upvotes: 2

Views: 27602

Answers (3)

whodeee
whodeee

Reputation: 657

The actual property that is changing the direction of the reveal animation is the bottom CSS property. If it were changed to top the animation would reveal down rather than up.

Try it for #clientsDropDown in the previous fiddle provided and you will see it in action.

Upvotes: 0

Learner
Learner

Reputation: 4004

Try changing your script to:

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

Yes and of course position the container div to absolute.

Upvotes: 1

j08691
j08691

Reputation: 207900

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.

Upvotes: 10

Related Questions