jQuery Plug-in: Tab Down

This simple plug-in has been on my TODO list for quite a while, as I’ve seen the effect used on many websites. It seems particularly useful for displaying contact details / social media updates. I’m sure there are many similar plug-ins around, but where’s the fun in using someone else’s version. So I created a jQuery Tab Down.

Tab Down simply hides content above the page which a user can then access via a floating tab. It’s easier to illustrate using a couple of demos. Demo 1 pushes the page content down with the tab, where as demo 2 tab content floats over the top of the page content. You can easily switch between versions by passing true or false to the “floating” option when calling the tabDown method.

The plug-in is simple to use and has a number of options to allow customisation:

1
2
3
4
5
6
7
8

$("#tabContent").tabDown({
    floating: true,
    time: 900,
    easing: "easeOutCubic"
    container: "body",
    downText: "Down",
    upText: "Up"
});

• Floating: Sets if the tab floats over the main content or pushes it down (default: true)
• Time: Time in milliseconds for the slide animation (default: 1000)
• Container: If your tab content is inside a “wrapper” div, let the plug-in know the selector for this div, see demo 1 for an example (default: “body”)
• Downtext: The text used in the tab before sliding down (default: “Down”)
• Uptext: The text used in the tab after sliding down (default: “Up”)
• Easing: For smoother animation you can use animation easing, requires the jQuery easing plug-in (default: “swing”)

View demo 1 and demo 2 (version 0.1 – updated 2nd Apr 2010).