Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at Scotch On The Rock (SOTR) 2010 (London) with:

Using jQuery's SlideUp() and SlideDown() Methods With Bottom-Positioned Elements

By Ben Nadel on

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.



Looking For A New Job?

100% of job board revenue is donated to Kiva. Loans that change livesFind out more »

Reader Comments

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;

Reply to this Comment

What about slideToggle()? It will automatically show or hide based upon visibility. Does this fail under certain circumstances?

$(function(){
$('a').click(function() {
$('#container').slideToggle();
});
});

Reply to this Comment

@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).

Reply to this Comment

@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.

Reply to this Comment

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>

Reply to this Comment

Ben you are my Hero !
I also found this confusing at first, but not now after I watch this video...

thank you Ben

Reply to this Comment

@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.

Reply to this Comment

@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.

Reply to this Comment

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>

Reply to this Comment

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)

---------------------------------------------

Reply to this Comment

@Recession,

Interesting. I haven't done much work with menus inside of sliding panels. I suppose you would need to code them both.

Reply to this Comment

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

Reply to this Comment

@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.

Reply to this Comment

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?

Reply to this Comment

@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.

Reply to this Comment

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

Reply to this Comment

@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).

Reply to this Comment

@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

Reply to this Comment

@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.

Reply to this Comment

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?

Reply to this Comment

@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.

Reply to this Comment

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.

Reply to this Comment

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();

Reply to this Comment

@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.

Reply to this Comment

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.

Reply to this Comment

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.

Reply to this Comment

Please, help me! The effect is very cool, but I need to do the same thing with various divs. How can I do it?

Reply to this Comment

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?

Reply to this Comment

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

Reply to this Comment

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.

Reply to this Comment

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

Reply to this Comment

@biju,

Of course you can - simply add an id to the link and reference it by changing this line

  • $('a').click(function() ...

to this:

  • $('a#yourID').click(function() ...

Reply to this Comment

@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...

Reply to this Comment

@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...

Reply to this Comment

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!

Reply to this Comment

Is it possible to make this script hide/reveal multiple divs independently? i.e. As in used for revealing different navigation menus?

Reply to this Comment

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

Reply to this Comment

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!

Reply to this Comment

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

Reply to this Comment

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

Reply to this Comment

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!

Reply to this Comment

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

Reply to this Comment

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

Reply to this Comment

@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 :)

Reply to this Comment

thanks thom ur snippet works for perfectly the way i wanted it to work .
just a little modification with my css

Reply to this Comment

hello sir
thanks for this article , i m new in jquery , this article have very simple function for a new learner
Thanks

Reply to this Comment

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

Reply to this Comment

@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

Reply to this Comment

@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

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.