• Please take a moment and tell us about your project, or give us a call at (888) 873-3281.
  • Write a short description of your business and services required

Up and Down slider using JQuery

To tell you the truth, I wish I could remember where I originally found this example because I would like to give credit where credit is due, but I really dont remember. Anyhow, this person’s example was a cool slider effect that stuck to the top of the page. Well I decided to take that and turn into into the same basic concept; only this time coded in JQuery. Oh Yes. I love JQuery.

The examle is pretty straight forward. So if you have any comments or concerns, definitley drop me a comment and I will try my best to answer them.

Here are the screen shots:

Slider in the "Off" Position
Slider in the "Off" Position
Slider in the "On" Position
Slider in the "On" Position

I kept the same colors and such from the other example so if anyone knows where the original was from, please let me know.

Click Here to see this example in action.

Want to download the code? Of course you do, click here.

Originally seen @ (Antonio Lupetti’s moo-tools example)


Ronald Busky  Ron's ability to express our client's message in a way that drives results is remarkable. We are firm believers in ROI, and it starts with the first paragraph! Ron's robust style and diverse portfolio has allowed him to write for clients ranging from car dealers to luxury hotels.


  1. Jeremy Latham


    Te example “bounces” when it opens in FF 3.0.5 w/ Vista64. Is that intentional?

  2. Vin Thomas


    I think you saw it originally on woork.

  3. Adeline


    Hi Rich,

    I’ve seen this done at: Web Designer Wall (jQuery tutorials for designers).

    It doesn’t use any additional jquery plugin (that’s if you don’t want the bounce animation at the end of your slide).


  4. d13t


    In Safari and FF on my Mac, the panel slides down and the jerks back a few pixels to it’s end position. Not so smooth.

  5. shin


    Download link is broken.

  6. Paul Davis


    Looks good! But the download link doesn’t work. :(

  7. inerd


    download link not working

  8. Neil


    Hi Rich
    I think it might have been on Woork

    Thanks for porting it to jquery. There are a few cool effects in mootools without exact jquery versions so you increase people’s choice every time you do something like this.

  9. badger


    I just happen to be looking for something along these lines. But when the page loads, I would like it to be in the closed state. Then click and it opens. I am some what new to JQuery, have any suggestions?

  10. Rich


    Sorry about that. Download link should work now.

  11. Bennor McCarthy


    The bouncing is a common issue with the jquery sliding functions. I believe it has something to do with a dodgy height calculation when there are margins and padding in the CSS, and you can work around it by setting a fixed height for the element you are sliding.

  12. Rich


    @Neil, Thanks! that was exactly where I had seen it. I feel better now knowing that he can get his proper credit (Antonio Lupetti’s moo-tools example)

    @Bennor, I think you are right. most developers; I believe, get around it by using jquery easing plugin, but moo-tools seems to have a better grasp at this. (but i will stay with jQuery).

    @badger, sure! add display:none; to the #top-panel{} css and change the Show in the sub-panel div to Hide. Hope that helps.

    @Adeline, he used moo-tools and he calls the moo-tools JS in his example. same way I call the jQuery.js. I dont use any other plugins in this example, but the call to jQuery.

  13. Shahriar Hyder


    Nice one mate. I have also added the link to your post in my Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance. Have a check below:


  14. BeBeN


    great great…so dynamic

  15. Peter


    is there an option of having the default hidden? where you click on show and the rest drops down?

  16. Chad


    how do you do it in reverse?

    as shown on this site?


  17. Rich


    Hey Chad, You can actually take a look at another post I wrote. That might help you since its “kind of” what you are looking for.

    Rotated Background with Slide Up menu using jQuery and CSS

    What you are looking for is really the slide up menu part of it.

    Hope that helps.

  18. Amanda


    Really nice… that’s why i love jQuery.

  19. Nelke


    What about Cookie to keep it closed if already closed one time?

  20. PS Web-design


    How do you get the slider to slide down over the page content? I am using in in a sample template and it always pushes the content down.

  21. Claudio (aglioeolio)


    To set defaul state to closed add:

    to css ID:

    and invert the script text/imgs states

  22. Leo Nasti


    Incredible page! I most certainly will possibly be viewing back again with regard to additional news.

  23. marticps


    To have the initial state hidden, I use $(“#top-panel”).hide();

    Any solution to the bounce?

  24. marticps


    Fixed: If you wanna mantain auto height, you have to define a width (like 242px or 100%)

  25. gg


    links not working

Leave a Comment

Your email address will never be published or shared. Required fields are marked with an asterisk (*).