Recent News
Copyright © 2014 THAT Agency . All Rights Reserved.
410 Evernia Street, Suite 118, West Palm Beach, FL 33401
Tel: (561) 832-6262 | Fax: (561) 832-7707

Up and Down slider using JQuery

02 Feb 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 don’t 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 example is pretty straight forward. So if you have any comments or concerns, definitely 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)

  • Jeremy Latham
    Posted at 19:46h, 02 February

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

  • Vin Thomas
    Posted at 20:23h, 02 February

    I think you saw it originally on woork.

  • Adeline
    Posted at 22:43h, 02 February

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


  • d13t
    Posted at 03:44h, 03 February

    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.

  • shin
    Posted at 07:59h, 03 February

    Download link is broken.

  • Paul Davis
    Posted at 08:45h, 03 February

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

  • inerd
    Posted at 09:40h, 03 February

    download link not working

  • Neil
    Posted at 12:03h, 03 February

    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.

  • badger
    Posted at 15:20h, 03 February

    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?

  • Rich
    Posted at 15:23h, 03 February

    Sorry about that. Download link should work now.

  • Bennor McCarthy
    Posted at 16:55h, 03 February

    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.

  • Rich
    Posted at 17:46h, 03 February

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

  • Shahriar Hyder
    Posted at 01:12h, 12 October

    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:

  • BeBeN
    Posted at 11:42h, 22 November

    great great…so dynamic

  • Peter
    Posted at 16:13h, 01 December

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

  • Chad
    Posted at 19:21h, 20 March

    how do you do it in reverse?

    as shown on this site?

  • Rich
    Posted at 08:13h, 23 March

    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.

  • Amanda
    Posted at 19:12h, 20 May

    Really nice… that’s why i love jQuery.

  • Nelke
    Posted at 01:05h, 27 March

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

  • PS Web-design
    Posted at 12:50h, 11 May

    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.

  • Claudio (aglioeolio)
    Posted at 07:11h, 19 July

    To set defaul state to closed add:

    to css ID:

    and invert the script text/imgs states

  • marticps
    Posted at 08:03h, 14 June

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

    Any solution to the bounce?

  • marticps
    Posted at 12:09h, 14 June

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