The sliding tabs jQuery plugin let's you create any number of tabs and make them slideable with the mouse scroll wheel or directional buttons.

What can it do?

Scroll any number of tabs
Unlimited number of tabs and no size limits.
Multiple transitions for the content
fade, slide horizontal and vertical (no effect is also possible).
Easing plugin for sliding effects
Just include the Easing plugin and specify the easing effect.
Auto height adjustment
Useful for content with varying height.
Multiple instances
The tabs can be included multiple times on the same page.
Open tabs via external links or the URL
The tabs can be linked to anywhere on the page.
Lightweight
The packed script weighs only 6kb.

Use the mouse scroll wheel to slide the tabs
Can be disabled if desired.
Autoplay support
Interval time can be set in the options.
Save the active/current tab state
If enabled, the last tab clicked will be saved with a cookie.
Navigates to the 'active' tab on page load
Active class name can be changed in the options.
Auto deactivates and hides the directional buttons
Set the styling with CSS.
Fully customizable
Fully customizable with CSS.
Compatible with all browsers
Including IE6.

How to use?

Step 1 - Include the scripts

Include the Javascript files in the <head> of your HTML document, and change the src="your-path/" to the location of your files. The code below loads jQuery from Google, but you can include your own copy instead if you want. The jQuery Easing Plugin is required for easing effects, and the jQuery Mousewheel Plugin is required for mouse wheel scrolling.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="your-path/jquery.mousewheel.min.js"></script> <!-- Optional -->
<script type="text/javascript" src="your-path/jquery.easing.1.3.js"></script> <!-- Optional -->
<script type="text/javascript" src="your-path/jquery.slidingtabs.pack.js"></script>

Step 2 - Create the HTML and CSS

You can get the HTML and CSS for the horizontal and vertical demos from the links below:

Horizontal tabs: HTML & CSS
Vertical tabs: HTML & CSS

Place the CSS code in your stylesheet or create a separate one and include it in your document <head> before the Javascript.

<link rel="stylesheet" type="text/css" href="your-path/style.css" />

Customizing the tabs - The tabs can be customized any way you want. A few things to note is:

Some CSS classes are predefined and needed for the sliding tabs to work. If you want to rename any of these classes remember to change them in the options as well (see step 3 below for more info on how to define options).
Each tab (<a> tag) has an href attribute that matches the id of a <div class="st_tab_view" /> element. They can be called anything you want, as long as they match. This is how the correct content will show when a tab is clicked.
If you have content with different height, set the autoHeight option to true. The content container element will then automatically adjust to your content.
Set the orientation option to 'vertical' if you use vertical tabs. The default is 'horizontal'.

Step 3 - Activate the plugin

As you can see from the demos above, you can have multiple tab instances on a single page. Just include the code below in the <head> of your HTML document, after the scripts. Specify wich element contains your tabs and define any options you want.

Repeat this step specifying your next tab container element if you want multiple instances.

<script type="text/javascript">
$(document).ready(function() {

    // Vertical tabs example
    $('#your_tabs_id').slideTabs({
        // Your options here        
        contentAnim: 'slideV',
        contentAnimTime: 600,
        contentEasing: 'easeInOutExpo',
        orientation: 'vertical',
        tabsAnimTime: 300
    });

});
</script>

Changing the tabs position

By adding a class to the tabs main container you can change the position of the tabs:

<div id="st_horizontal" class="st_horizontal align_bottom" />

For horizontal tabs add the class: align_bottom and for vertical tabs add the class: align_right.

External linking

You can link directly to any tab by adding links anywhere on the page. Below is an example of how its done:

<a href="#tab_2" class="st_ext" rel="st_horizontal" />

The href attribute should match the rel attribute of the tab you want to open. Each external link must have the .st_ext class, but the name can be changed in the options. And finally the rel attribute should match the id of the tabs you want to target, in this case the horizontal tabs.

URL linking

You can also target tabs with the URL:

http://www.your-url.com#tab_2

The URL's hash value (#tab_2) should match the rel attribute of the tab you want to open. urlLinking can be disabled by setting it to false in the options.

View the external linking demo

Customization options

Option	Properties	Description
`autoplay`	boolean - Default: `false`	Enable or disable auto playing. Set to `true` or `false`.
`autoplayClickStop`	boolean - Default: `false`	Disable autoplay on tab click. Set to `true` or `false`.
`autoplayInterval`	integer - Default: `4000`	Set the time between each autoplay interval (set the time in milliseconds; 1sec = 1000ms).
`autoHeight`	boolean - Default: `false`	Enable or disable auto height adjusting for the content. Set to `true` or `false`.
`autoHeightTime`	integer - Default: `0`	Set animation time for when the content container's height resizes (set the time in milliseconds; 1sec = 1000ms).
`buttonsFunction`	string - Default: `'slide'`	Specify if the directional buttons should click or slide through the tabs. Set to `'click'` or `'slide'`.
`classBtnDisabled`	string - Default: `'st_btn_disabled'`	The CSS class added to the prev/next buttons when they are unable to be clicked.
`classBtnNext`	string - Default: `'st_next'`	The CSS class used for the next-tab button.
`classBtnPrev`	string - Default: `'st_prev'`	The CSS class used for the previous-tab button.
`classExtLink`	string - Default: `'st_ext'`	The CSS class used for the external tab-links.
`classTab`	string - Default: `'st_tab'`	The CSS class used for the tabs.
`classTabActive`	string - Default: `'st_tab_active'`	The CSS class used for the active/highlighted tab.
`classTabsContainer`	string - Default: `'st_tabs_container'`	The CSS class used for the tabs container div element.
`classTabsList`	string - Default: `'st_tabs'`	The CSS class used for the tabs unordered list element.
`classView`	string - Default: `'st_view'`	The CSS class used for the content's slide container div element.
`classViewActive`	string - Default: `'st_active_view'`	The CSS class used for the active-view div element.
`classViewContainer`	string - Default: `'st_view_container'`	The CSS class used for the content's container div element.
`contentAnim`	string - Default: `'slideH'`	Animation for the content. `'fade'`, `'fadeOutIn'`, `'slideH'` or `'slideV'`. Leave empty `''` for no animation.
`contentAnimTime`	integer - Default: `600`	Content sliding/fading animation time in milliseconds (1sec = 1000ms).
`contentEasing`	string - Default: `'easeInOutExpo'`	Easing effect for the content sliding animation. Leave empty `''` if you don't want any effect (requires the jQuery Easing Plugin).
`offsetBR`	integer - Default: `0`	Offset the tabs pluss/minus the bottom or right direction (depending on the sliding `orientation`).
`offsetTL`	integer - Default: `0`	Offset the tabs pluss/minus the top or left direction (depending on the sliding `orientation`).
`orientation`	string - Default: `'horizontal'`	Specify the sliding direction of the tabs. Set to either `'horizontal'` or `'vertical'`.
`tabSaveState`	boolean - Default: `false`	Save the clicked tab's 'active' state with a cookie. Set to `true` or `false` (requires the jQuery Cookie Plugin).
`tabsAnimTime`	integer - Default: `300`	Tabs sliding animation time in milliseconds (1sec = 1000ms).
`tabsEasing`	string - Default: `''`	Easing effect for the tabs sliding animation. Leave empty `''` if you don't want any effect (requires the jQuery Easing Plugin).
`tabsScroll`	boolean - Default: `true`	Enable or disable mouse scrolling. Set to `true` or `false` (requires the jQuery Mousewheel Plugin).
`tabsSlideLength`	integer - Default: `0`	The width or height of the visible tabs area (depending on the sliding `orientation`). The value should be the full width/height of the `.st_tabs_container` element. If set to `0` the script will calculate the value automatically.
`totalHeight`	string - Default: `''`	Specify the total height of the tabs layout. The value is set in pixels (px).
`totalWidth`	string - Default: `''`	Specify the total width of the tabs layout. The value is set in pixels (px). If set to `'auto'` the tabs width will adjust to its parent element.
`urlLinking`	boolean - Default: `true`	Enable or disable linking to tabs via the URL. You can link to any tab by matching its `rel` attribute with a hash value in the URL: www.your-url.com#tab_1

Sliding Tabs

Horizontal demo

Horizontal Tab #1

Horizontal Tab #2

Horizontal Tab #3

Horizontal Tab #4

Horizontal Tab #5

Horizontal Tab #6

Horizontal Tab #7

Horizontal Tab #8

Horizontal Tab #9

Horizontal Tab #10

Tab Options

Alignment

Animation speed:

Directional buttons:

Easing effect:

Scroll wheel:

Content Options

Animation speed:

Animation type:

Easing effect:

Vertical demo

Vertical Tab #1

Vertical Tab #2

Vertical Tab #3

Vertical Tab #4

Vertical Tab #5

Vertical Tab #6

Vertical Tab #7

Vertical Tab #8

Vertical Tab #9

Vertical Tab #10

Tab Options

Alignment

Animation speed:

Directional buttons:

Easing effect:

Scroll wheel:

Content Options

Animation speed:

Animation type:

Easing effect:

What can it do?

Scroll any number of tabs

Multiple transitions for the content

Easing plugin for sliding effects

Auto height adjustment

Multiple instances

Open tabs via external links or the URL

Lightweight

Use the mouse scroll wheel to slide the tabs

Autoplay support

Save the active/current tab state

Navigates to the 'active' tab on page load

Auto deactivates and hides the directional buttons

Fully customizable

Compatible with all browsers

How to use?

Step 1 - Include the scripts

Step 2 - Create the HTML and CSS

Customizing the tabs - The tabs can be customized any way you want. A few things to note is:

Step 3 - Activate the plugin

Changing the tabs position

External linking

URL linking

Customization options