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.
![jQuery tab down plug-in example](/images/2010/04/tab-down-example.gif)
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).