Using jQuery's SlideUp() and SlideDown() Methods With Bottom-Positioned Elements
jQuery makes the creation of dynamic user interfaces easier than ever before. A few of the convenience methods that I use every single in my web application development are slideDown() and slideUp(). These are perfect for showing and hiding content in a non-jarring manner. The slideDown() method shows content by sliding open a given element; the slideUp() method, on the other hand, hides content by sliding closed a given element. These are very basic methods, but I describe them here in order to point out that sometimes, I get so attached the name of a given method, I lose sight of what it's actually doing.
I fell victim to this narrow-sightedness just last week. I had an element with a fixed position in which its position was defined using the, "bottom," CSS property. Essentially, I had a bottom window user interface panel. Now I didn't want this panel to be shown all the time; sometimes it would need to be out of sight, and sometimes, I wanted it to slide up onto the screen. I was so used to sliding things DOWN with jQuery, that when it came to sliding things UP, I was so out of context that I actually started to use the animate() method to achieve the slide-up effect.
After I got this approach to work, including the offset calculation and re-positioning that I needed to perform prior to slide-up, I had a "well d'uh" moment! It suddenly dawned on me that the methods "slideDown" and "slideUp" weren't just for "down" and "up" directions, respectively - they were for "open" and "close" actions in general. That's when I realized that the slideDown() method could be used to open an element in an upward direction.
<!DOCTYPE HTML>
<html>
<head>
<title>jQuery SlideDown() / SlideUp() With Bottom-Positioned Elements</title>
<style type="text/css">
#container {
bottom: 0px ;
display: none ;
left: 20px ;
position: fixed ;
width: 90% ;
}
#inner {
background-color: #F0F0F0 ;
border: 1px solid #666666 ;
border-bottom-width: 0px ;
padding: 20px 20px 100px 20px ;
}
</style>
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript">
// When the DOM is ready, initialize the scripts.
jQuery(function( $ ){
// Get a reference to the container.
var container = $( "#container" );
// Bind the link to toggle the slide.
$( "a" ).click(
function( event ){
// Prevent the default event.
event.preventDefault();
// Toggle the slide based on its current
// visibility.
if (container.is( ":visible" )){
// Hide - slide up.
container.slideUp( 2000 );
} else {
// Show - slide down.
container.slideDown( 2000 );
}
}
);
});
</script>
</head>
<body>
<h1>
jQuery SlideDown() / SlideUp() With Bottom-Positioned Elements
</h1>
<p>
<a href="#">Show Div With SlideDown()</a>
</p>
<div id="container">
<div id="inner">
Check it out! This DIV is positioned based on its
very sexy Bottom and then is opened using a slide-down
animation effect (and closed using a slide-up)
animation effect.
</div>
</div>
</body>
</html>
Once I had this realization, it made so much sense that I was, in fact, more than a little embarrassed that it didn't occur to me sooner. This is just a good reminder to myself to always stop and think about what I'm trying to do philosophically, and not just concentrate on which combinations of methods I need to call in order to accomplish a given task.
Want to use code from this post? Check out the license.
Reader Comments
I've been making use of this functionality over at my freelance site:
http://commadelimited.com/
@Andy,
Cool effect! Yeah, I feel so silly that I had confusion about this :)
Yeah, that's pretty confusing. Rather than try to keep track in your head that up really means down, you might consider aliasing those methods.
$.fn.slideOpen = $.fn.slideDown;
$.fn.slideClose = $.fn.slideUp;
What about slideToggle()? It will automatically show or hide based upon visibility. Does this fail under certain circumstances?
$(function(){
$('a').click(function() {
$('#container').slideToggle();
});
});
@Patrick,
That's an interesting idea; but, the reality is that the slideDown and slideUp are very descriptive names for the methods. The issue was not with the method name so much as it was with my understanding of what it was doing.
@James,
I was going to go with slideToggle() at first, but I wanted to have the slideDown() and slideUp() method calls being made explicitly in the code (to help the conversation).
It sounds to me as if these methods would have been better named slideOpen(); and slideClose(); :)
@Jeff,
Maybe. I think because the down/up approach is the 99% use case for what they are, that would make sense. Someone could come along and make a slideRight() and slideLeft() method... but again, these are outliers.
I came across this page because I was searching for a certain behavior. I didn't just want the element to slide up; I wanted it's contents to slide up with it. As if the contents were written on a piece of paper that you were sliding up or down. Instead slideUp/Down/Toggle methods change the height of the element shrinking or expanding the element and in the usual case simply cutting off the contents as it gets smaller.
On Jeff's website mentioned above it gives the effect I want: the content slides up as if it were attached to something. However, I want my content to slide from the top not the bottom.
So i found a way to do it by placing my container element within an overflow:hidden wrapper and using the animate method to slide the element up using negative margin. (this is what google is doing on their adwords dashboard gadgets)
Here's the code, sorry for the long post just thought it might help someone looking for the same behavior. :)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.panel { width: 100px; background: #f3f3f3; border: solid #333; border-width: 0px 1px 1px 1px; padding: 1em; }
.dispensor { width: 100px; background: #ccc; border: 1px solid #333; padding: 1em;}
</style>
</head>
<body>
<div class="dispensor">
Dispensor
</div>
<div style="overflow: hidden">
<div class="panel">
<ul>
<li>apple</li><li>bear</li><li>cookie</li></ul>
</div>
</div>
<p>
some stuff below...</p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$(document).click(function () {
if ($('.panel').is(':hidden')) {
$('.panel').show();
$('.panel').animate({ marginTop: '0px' });
}
else {
$('.panel').animate({ marginTop: '-' + $('.panel').height() + 'px' }, function () {
$('.panel').hide();
});
}
});
});
</script>
</body>
</html>
Just a quick fix for the code example above:
$('.panel').height()
should instead be...
$('.panel').outerHeight()
@Thomas,
Not bad. I suppose you could do the same with Top as well as margin.
Ben you are my Hero !
I also found this confusing at first, but not now after I watch this video...
thank you Ben
thanks ben good effect
Awesome. Thanks. I just used it.
@Muhammadiq, @Sabaqahmad, @Derrick,
Glad you guys like it. It's trickier to change the mind set of what the term, "slideDown", actually means than it is to implement.
That's exactly the situation that came to my mind the other day. Saved my life there! xoxo
A working example (ie, we can see it working) would have been nice!
@Daniela,
Awesome - glad to help.
@Robby,
I can appreciate that. Sometimes, I just don't have enough time to put it all together. I try to provide a video to demonstration to visualize the example; that I can do because the video creation is auto-integrated into my server / FTP situation. Having to set up a mannal demo just involves more effort :)
I hope that for now, the video will suffice.
I was going to use Mootools.
I don't get this. if you mess with #Inner on CSS. it reappears. I didn't like how it reappears messages on the screen. Try it.
How to fix this?
<style type="text/css">
#container {
bottom: 0px ;
display: none ;
left: 20px ;
position: fixed ;
width: 90% ;
}
#inner {
background-color: #F0F0F0 ;
border: 1px solid #666666 ;
border-bottom-width: 0px ;
padding: 20px 20px 100px 20px ;
}
</style>
I removed <!DOCTYPE HTML>. how to fix this?
@Recession,
I am sorry, I am not sure what you are asking me? What browser are you using?
IE 7. It works fine with "<!DOCTYPE HTML>"
Anyways, I want see innovation based on slidepanel with drop down menu on it.
____________________________
| | <-- Up/Down
|_menu______________________| <--Slidepanel
| File | <-- Hide/show
| Exit | <-- Slidepandel slide back up
--------
(Click here)
=============================================
I don't want slidepanel that look like this and leave out DIV behind. :p
___________________________ <- Closing panel
______
| File | <-- won't slide back up and hide
| Exit |
--------
(Click here)
---------------------------------------------
@Recession,
Interesting. I haven't done much work with menus inside of sliding panels. I suppose you would need to code them both.
Hi Ben,
Looks great!
Is is also possible to have the panel slide up on load of the page, not on click? How would I have to change the code to make that work?
Thanks so much in advance.
Marieken
@Marieken,
In order to do that, all you have to do is explicitly call the slide-methods when the DOM is ready (which is what the jQuery(function...) is doing.
Hey Ben,
I had the same problem too and your post helped a great deal! Thanks for this wonderful article!!
Hey Ben,
Thanks for clearing this up!
Also, is there a way for the container to be open when you first load the page, so that when u click on the link it will slideUp?
@Essam,
Glad to help my friend.
@Shahab,
Absolutely; I had my DIV initially set to "display: none ;" so that it started hidden. You could take that out (or change it to display:block) to have it start open.
Ben happened across and thought would point out an article by Karl Swedberg
http://www.learningjquery.com/2009/02/slide-elements-in-different-directions
Discusses this as well as horizontal slides (lots of fun with math :D )
@Kevin,
Thanks for the link. Karl really know his jQuery.
Hi Ben,
just found you on the web and bookmarked it right away. Seems to be a very cool place for sharing ideas. Actually you helped me a lot with this post.
I am in the process of creating a horizontally and vertically scrolling website. Because of its complicated nature (overflow hidden) the height of the content area is limited to the viewport area and no vertically body scrolling is available. That made it very hard for me to include the footer which becomes more and more important these days and is getting bigger and bigger because of that.
Your "well d'uh" moment came for rescue. Now I have plenty of space for my footer which slide out very elegant from the bottom of the screen when I hover the toggle button. Thank you very, very much for helping me.
BUT!!!!!! There still is one problem left for me (still newbie) and maybe one of your guys can help me.
Right now the panel opens on hover and closes if I leave the toggle button. In general this is OK but I also want the panel stay open long enough to reach it with my mouse in case I want to click to a link that might be included in the panel. If I do not click anything and leave the mouse, the panel should close. I think it is a very common function because many tooltips act like that but I have no idea what to add to the script.
Cheers from Berlin, Germany
Hardy
@Hardy,
Glad you're liking the stuff I write. I am not sure I am completely understanding the set up you have - is the Toggle button *in* the footer? Or the button outside the footer (but causes the footer to show when clicked).
@Ben,
thanks for your reply. Yes, the button is outside the panel and what I am looking for is just the "delay effect" that tooltips very often use to reach them in case there are active links inside the tooltip. Without that dealy effect you never could reach the content of those tooltips. I want the same for the bottom slide out panel. So I need enough delay to reach it after I left my toggle. Once I am "in" the panel it stays open and is closing at mouseout. Got it what I have in mind.
By the way - how feels NYC today? I love your city soooo much and I have been there so many times but not again since 11.
Cheers from Berlin
@Hardy,
I see what you're saying now. Typically, for something like that, I'll use a setTimeout() to create the delay. I'll see if I can come up with a small example of something like that in the morning.
@Hardy,
Check this out:
www.bennadel.com/blog/2025-Using-SetTimeout-To-Delay-The-Closing-Of-A-Related-UI-Element-Based-On-User-Interactions.htm
I hope this helps a bit.
Regarding setTimeout, check out doTimeout:
http://benalman.com/projects/jquery-dotimeout-plugin/
Delayed code execution (including interval and timeout management), polling loops and debouncing. In addition, it's fully jQuery chainable!
God bless you ... it works on my web :)
I really like your script. But what my client need is the container hidden (slideDown) as default. Could you please help me how to modify it?
@James,
Yeah, Ben Alman has some really nice plugins. He really thinks his stuff out very well.
@Alejandra,
Glad you like :)
@Cims,
All you have to do is add "display:none" to the default CSS of the object you are dealing with.
Thanks, Ben!
This has helped me tremendously!
Hey Great Article,
Very simple and easy to follow. Loved the Screencast. Thanks again, btw I have also created a beginner tutorial on using the jQuery slideUp and slideDown functionality. Please feel free to share: http://www.tonylea.com/2010/jquery-slideup-and-slidedown/
Thanks for your help ;)
Thanks a ton! This was an extremely simple solution to what I thought could be a time consuming task. :)
How would I be able to achieve an accordion style effect with this?
I am working with multiple divs and I wanted to find out how you would make one slide down while the other slides up, kinda like an accordion style effect?
Thanks.
Accordion with jQuery? You could always use the jQuery UI Accordion. It's very configurable, degradable, use semantic markup and can be themed:
http://jqueryui.com/demos/accordion/
(NOTE: There are other cool widgets available too, like autocomplete, tabs, calendar & dialog. I prefer these over the built-in CF functions.)
You could make your own accordion by closing all of the DIVs (multiple ways of identifying which elements need to close) and opening only the one that you've clicked on. Using the UI library makes it as easy as:
$( "#parentDIV" ).accordion();
@James,
The effect I'm looking for is different from what is in the jQuery UI Library. In fact I think the problem is in finding a way to select the right element.
I'm basically trying to achieve the effect in this video, but with more divs and an accordion feature so that one slides back down while the active div is up. The solution I'm thinking of relies on working with anchor hash values.
I am not looking for a standard accordion tutorial. The Collapsible content example from the jQuery UI freezes when I expand one of the sections, which is not very accessible to me. I prefer a simple solution without resulting to plugins.
Thanks anyway.
Thanks for the additional information. This information is always good to provide upfront so that others know what you have tried and are aware of any additional requirements. I didn't know how familiar you are with jQuery and thought I'd recommend something supported by the community.
I believe I did something like you are requesting here:
http://www.laserdevices.com/index.cfm/c-Aiming_Lasers.htm
using the jQuery Tools library (11k):
http://flowplayer.org/tools/
When selecting a section, it updates the anchor, replaces some content using ajax and changes the title of the page. Is this similar to the behavior that what you are looking for?
Regarding the anchor hash, this appears to be a client-only parameter and isn't passed to web servers. The only way to identify it via javascript and then resend the information to the server.
Wow, it's so simple now that you share your eureka moment... thanks!
awesome effect man!!!!
can i use this on mouseover??
Just a bit off topic... what's your editor sir Ben? Im using notepad plus but it's not really good for me. Sorry im still a beginner.
Please, help me! The effect is very cool, but I need to do the same thing with various divs. How can I do it?
Many thanks, that's what i'm looking for!
Great topic and info.
I'm trying to create a scrolling effect with real-time user posted information, like seen on the front page of www.xing.com in the "What's happening on Xing right now" section.
The information is being posted in a SQL server db. How can I do this in ColdFusion? Are there any examples of such code?
Hi!
I should rebuild a site in html, bacuse it is in flash, and we want the iPa... users to see it correctly.
Then i googled, slidup from bottom, this post was the first. i saw, it's works, so i easily sad: no problem boss :)
i bookmarked your page :)
Thx for this post
How do I activate with an onClick event? Because at the moment all links on the page activates the slider. I am using or div tags and classes on the same page.
I figured it out. Working Perfectly now!
Hi Ben, Thanks for the great article!
Is it possible to have the panel visible on page load i.e. the first click actually hides the panel?
I tried just swapping the CSS styles but to no avail.
Thanks, Dan
@biju,
Of course you can - simply add an id to the link and reference it by changing this line
to this:
@Jermaine,
Thanks Jermaine Oppong..its work...
Is any way to Fix the static position of notification div.
In wide range screen's notification div position are changing...
@Jermaine,
Thanks Jermaine Oppong..its work...
Is any way to Fix the static position of notification div.
In wide range screen's notification div position are changing...
I just went through this same exact process. :P I'm glad I wasn't alone, thanks for blogging about it.
looks great. I'll try it on my blog, thanks!
Realy nice thanks :)
Hello Ben, Thank you for your work!. but I have a question for you.
I changed CSS code into like:
<style type="text/css">
#container {
top: 0px ;
display: none ;
left: 0px ;
position: fixed ;
width: 90% ;
z-index:1;
}
#inner {
background-color: #F0F0F0 ;
border: 1px solid #666666 ;
padding: 20px 20px 100px 20px ;
z-index:1;
}
</style>
and toggle button into like:
<div style="z-index:100;">
Show Div With SlideDown()
</div>
I thought z-index code makes toggle button remained on the "container" box but it does not work. toggle button was hidden when "container" box is risen. what is wrong thing in my code? could you explain this?
Thank you!
Is it possible to make this script hide/reveal multiple divs independently? i.e. As in used for revealing different navigation menus?
Hey thanks for this info! Just what I needed! I am not sure if you still check out these comments but all your work is much appreciated
thanks for you share.
i like it thanku
Wow, this is great! Thanks so much. I am trying to use this solution with what looks like a clickable tab. Clicking the tab slides the panel up and then down if clicked again. The clickable tab needs to stay on screen so it can always be clicked, but currently slides all the way off screen because it is inside the #container. I'm trying to find the best way to do this. I tried a bit of negative margin on the #container, in hopes that would sort of "pull" it up into view, but it didn't work. Any advice would be greatly appreciated.
Thanks in advance!
Thanks so much, this is so helpful to the project I am working on.
In the javascript:
// Bind the link to toggle the slide.
$( "a" ).click(
Is there are way to bind it to a specific link? like with an ID ?
Thanks
Never mind I answered my own question.
// Bind the link to toggle the slide.
$( "#test a" ).click(
where #test is the ID of the desired element.
Thanks for the tutorial, most helpful
Thanks, Ben. Thanks to your "ah-ha" moment...we have a solution to our problem!
Thanks Ben! Just wanted to say how awesome your coding work out for a site I was working on. I've came across other type of sliding divs, but yours was exactly what I was trying to find. So again, thanks!! Cheers!
thanks, it's is a very good and simple example for this application..
Hi, it works great for me, but i have some doubts, Like I've 2 or more div tags which needed to be appear by clicking the corresponding <a> tag. So please help me ASAP
@James,
Thanks for your post.
I would like to inquire about the slide that partially cover the bottom area when in scroll down, I want slide will stop when meeting with the bottom section when the widget to scroll down and widgets on it when in scroll upwards. please enlightenment. thanks
@Thomas,
The behavior you described is exactly what I was looking for, and your jQuery code did the trick! Thank you :D
@Jeff,
Also, great tutorial, Jeff! Really cleared things up :)
that's cool. thank you for the article :)
Helped much! I had the same confusion!
Thank you very much
It is so helpful, I appreciate :)
thanks thom ur snippet works for perfectly the way i wanted it to work .
just a little modification with my css
hello sir
thanks for this article , i m new in jquery , this article have very simple function for a new learner
Thanks
Haha,
cool man, I was looking for that for quite a long time, it's so easy once you know it. I never would have thought of doing it this way, thanks a lot!
Regards
@Ben,
Hi Ben. how would I apply this technique to multiple divs at the bottom of the page? I have four tabs of info that I would like to slide up when clicked on.
thanks!
-Adam
@Ben,
Hi Ben. how would I apply this technique to multiple divs at the bottom of the page? I have four tabs of info that I would like to slide up when clicked on.
thanks!
-Adam