jQuery Plugin - Installation

Step 1: Include the SlideTabs template CSS file

Include the template.css file of the template you want to use in the <head> of your HTML. You can also place the CSS code in your own stylesheet if you prefer. Make sure you include the CSS before the JavaScript files.

<link rel="stylesheet" href="templates/clean/template.css" type="text/css" />

Step 2: Include the JavaScript files

Include the jQuery library and the SlideTabs plugin to the <head> of your HTML.

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.slidetabs.min.js"></script>
                                

Optionally, you can include the jQuery Easing Plugin to enable easing effects for the animations, and the jQuery Mousewheel Plugin for enabling mouse wheel scrolling.

Step 3: Add the HTML markup

Add the HTML below to the body of your HTML (where you want to display the tabs).

<div id="slidetabs" class="clean-horizontal">
	<div class="st_tabs">
		<div class="st_tabs_wrap">
			<ul>
				<li><a href="#view_1">Tab 1</a></li>
				<li><a href="#view_2">Tab 2</a></li>
				<li><a href="#view_3">Tab 3</a></li>
			</ul>
		</div>
	</div>
	<div class="st_views">
        <div class="view_1 st_view">Tab 1 Content</div>
        <div class="view_2 st_view">Tab 2 Content</div>
        <div class="view_3 st_view">Tab 3 Content</div>
	</div>
</div>

Step 4: Activate the plugin

Finally, the plugin needs to be activated. Add the following JavaScript to the <head> of your HTML, after the scripts included in 'Step 2'. Alternatively, you could move it to an external file.

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('#slidetabs').slidetabs();
    });
</script>

If you want to place multiple tabs on the same page take a look at the multiple instances guide.

Step 5: Done!

That's it, you now have SlideTabs on your website. Start adding in your content to the content containers (div.st_view) and rename the tabs how you want them.

jQuery Plugin - Settings Overview

To change the plugin settings you can pass in a single object containing the settings to the .slidetabs() action. Take a look at the example below to see how it's done. Full settings list is available below.

$('#slidetabs').slidetabs({
    // Define any options below
    contentAnim: 'fade',
    contentAnimSpeed: 500,
    orientation: 'vertical',
    tabsAnimSpeed: 300
});

Customization Settings (listed in alphabetical order)

Setting Description
ajaxCache boolean  ⋅  Default: true
Enable caching if you don't want to re-load the content each time an AJAX tab is clicked. Set to true or false.
ajaxError string  ⋅  Default: 'Failed to load content'
The error message displayed if the AJAX content fails to load.
ajaxSpinner boolean  ⋅  Default: false
When enabled, a <span> element with the class '.st_spinner' will be added to the main container when the AJAX content is loading. Set to true or false.
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: 5000
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.
autoHeightSpeed 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'.
contentAnim string  ⋅  Default: 'slideH'
Animation for the content. 'fade', 'fadeOutIn', 'slideH' or 'slideV'. Leave empty '' for no animation.
contentAnimSpeed integer  ⋅  Default: 600
Content animation time in milliseconds (1sec = 1000ms).
contentEasing string  ⋅  Default: ''
Easing effect for the content sliding animation. Leave empty '' if you don't want any effect (requires the jQuery Easing Plugin).
externalLinking boolean  ⋅  Default: false
Enable external linking (linking to tabs from external anchor tags). Set to true or false.
offsetBR integer  ⋅  Default: 0
Offset the tabs plus/minus the bottom or right direction (depending on the sliding orientation).
offsetTL integer  ⋅  Default: 0
Offset the tabs plus/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'.
responsive boolean  ⋅  Default: false
Specify if the tabs are used in a responsive layout. Set to true or false.
tabsAnimSpeed integer  ⋅  Default: 300
Tabs sliding animation speed 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).
tabsLoop boolean  ⋅  Default: false
Loop back to first/last tab at the end of each sliding direction. Set to true or false.
tabsSaveState boolean  ⋅  Default: false
Save the clicked tab's 'active' state with a cookie. Set to true or false (requires the jQuery Cookie Plugin).
tabsScroll boolean  ⋅  Default: true
Enable or disable mouse scrolling. Set to true or false (requires the jQuery Mousewheel Plugin).
tabsShowHash boolean  ⋅  Default: false
Show the tab-links #hash value in the URL when they are clicked. Set to true or false.
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_wrap element. If set to 0 the script will calculate the value automatically.
tabsToSlide integer  ⋅  Default: 1
Set the number of tabs to slide into view at once.
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.
touchSupport boolean  ⋅  Default: false
Enable touchscreen interaction for the tabs and content. Set to true or false. Note: the jquery.slidetabs.touch.js file must be included for this setting.
urlLinking boolean  ⋅  Default: false
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
useWebKit boolean  ⋅  Default: true
Use WebKit CSS3 animations when available.

jQuery Plugin - Callbacks

In addition to the plugin settings you can pass in custom callback functions to the .slidetabs() action as well. Take a look at the example below to see how it's done. The full callbacks list is available below.

$('#slidetabs').slidetabs({
    onTabClick: function(currentTab) {
    	// your code here ..
    }  
});

Callback Functions

Callback Description
onAjaxComplete This callback is triggered when the AJAX call has completed.
onContentVisible This callback is triggered when the content is fully visible.
onTabClick This callback is triggered when a tab is clicked.
onTabNextSlide This callback is triggered when the 'next' directional button is clicked.
onTabPrevSlide This callback is triggered when the 'prev' directional button is clicked.

jQuery Plugin - API Controls

You can interact with SlideTabs after adding it to your website. It's best to assign the SlideTabs object to a variable first and refer to it when using the API. Take a look at the example below:

<!-- The tabs HTML: -->
<div id="slidetabs" class="clean-horizontal">
	...
</div>
                                
<script type="text/javascript">
    // Assign the SideTabs object
    var slidetabs = $('#slidetabs').slidetabs();
    
    // API usage
    slidetabs.goToNext();
    
    // You can also interact with SlideTabs without assigning it to a variable
    $('#slidetabs').slidetabs().goToNext();
</script>

Public Controls

Setting Description
.addTab(tab, content) tab (string)  ⋅  The tab's title.
content (string)  ⋅  The tab's related content.
Add a new tab and content.
.removeTab(index) index (integer)  ⋅  The index position of the tab to be removed.
Remove a specific tab. To remove the first tab you would use; .removeTab(1).
.goTo(index) index (integer)  ⋅  The index position of the tab to be opened.
Open/activate a specific tab. To open the first tab you would use; .openTab(1).
.goToPrev() Open/activate the previous tab.
.goToNext() Open/activate the next tab.
.slidePrev() Slide the previous tab into view.
.slideNext() Slide the next tab into view.
.setContentHeight() Set the current content's height. The content container will adjust to the content inside the active content view/pane.
.pauseAutoplay() Pause the current auto-play interval.
.resumeAutoplay() Resume the current auto-play interval.
.destroy() Remove the tabs functionality and return back to the pre-init state

jQuery Plugin - Changing the Tabs Position

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

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

<!-- Horizontal Tabs -->
<div id="slidetabs" class="clean-horizontal align_bottom">
	...
</div>

<!-- Vertical Tabs -->
<div id="slidetabs" class="clean-vertical align_right">
	...
</div>

Note: Set the orientation option to 'vertical' if you align the tabs to the left or right:

$('#slidetabs').slidetabs({
    orientation: 'vertical'
});

jQuery Plugin - Naming the Tabs

Each tab link has an href attribute that matches the class name of a <div class="st_view"> element. They can have any name, as long as they match. This is how the correct content will show when a tab is clicked.

Note: Only the tab links needs the hash (#) sign before the name.
<!-- The following tab: -->
<a href="#view_1">Tab 1</a>

<!-- .. will link to this container: -->
<div class="view_1 st_view">Tab 1 Content</div>

The tab link above has a href value of '#view_1', so the tab's content container needs to have a class of: 'view_1'.

jQuery Plugin - AJAX Tabs

The HTML

You can load external content via AJAX by adding a link to the href attribute that points to the content you want to load. The content containers for the AJAX tabs will be added automatically.

<div id="slidetabs" class="clean-horizontal">
	<div class="st_tabs">
		<div class="st_tabs_wrap">
			<ul>
				<li><a href="ajax/content_1.html">AJAX Tab 1</a></li>
				<li><a href="ajax/content_2.html">AJAX Tab 2</a></li>
                <li><a href="ajax/content_3.html">AJAX Tab 2</a></li>
			</ul>
		</div>
	</div>
	<div class="st_views"></div>
</div>

If you want to set a custom href name like the static tabs uses, you can add a data-target attribute with the name you want instead.

<a href="ajax/content_1.html" data-target="#ajax_tab_1">Tab 1</a>

Displaying a Preloader

Optionally you can display a preloader when the content is loading. If enabled, a <span> element with the class '.st_spinner' is added to the tabs main container that can be styled any way you want.

/* Centered AJAX Preloader */                                
span.st_spinner {
	position: absolute;
    top: 50%
    left: 50%;
	width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
    background: url("spinner.gif") no-repeat 50% 50%;
}

jQuery Plugin - Multiple Instances

You can include multiple tabs on the same page by giving the tabs main HTML container a unique id.

<!-- Tabs with id: 'horizontal_tabs'-->
<div id="horizontal_tabs" class="clean-horizontal">
	...
</div>

<!-- Tabs with id: 'vertical_tabs'-->
<div id="vertical_tabs" class="clean-vertical">
	...
</div>

To activate the tabs you need to add the activation code for each container.

<script type="text/javascript">
	$(document).ready(function() {
        // Activate the tabs by using their unique id: 'horizontal_tabs'
        $('#horizontal_tabs').slidetabs();
    
        // Activate the tabs by using their unique id: 'vertical_tabs'
        $('#vertical_tabs').slidetabs();
	});
</script>

jQuery Plugin - Setting the Active Tab

You can choose which tab should be active/highlighted on page load by adding the 'st_tab_active' class to the tab you want to activate:

<a href="#view_1" class="st_tab_active" >Tab 1</a>

If no class is added to any of the tabs, the first tab will be active on page load.

Note: To re-active the last activated/clicked tab when the page reloads, set the tabsSaveState setting to: true

jQuery Plugin - Adding Tab Icons

Method 1: Set a Background Image

The first method is to set a background image directly on the tab element. This can be done by giving the tab a unique id or class and use some CSS to set a background image.

<a href="#view_1" class="tab_icon_class">Tab with Icon</a>

Use the new class to set a background image with CSS:

a.tab_icon_class {
	background: url("path/to/your-icon.jpg") no-repeat 0 0;
}

Method 2: Add an Inline Element

The second method is adding a new inline element to the tab link. This way you can use a different background on the tab itself.

<a href="#view_1"><span class="icon"></span>Tab with Icon</a>

Style the new <span> element with some CSS:

/* Style the <span> tag to display your icon */
span.icon {
    display: block;
	width: 50px;
    height: 50px;
    background: url("path/to/your-icon.jpg") no-repeat 0 0;
}

jQuery Plugin - Touch Support

Both the tabs and content panes have support for touchscreen interaction. To enable touch support, simply include the touch module and enable the touchSupport setting:

Step 1: Include the jquery.slidetabs.touch.min.js file

Include the touch module after the plugin file.

<script type="text/javascript" src="jquery.slidetabs.min.js"></script>
<script type="text/javascript" src="jquery.slidetabs.touch.min.js"></script>
                                

Step 2: Enable touch support

Add the touchSupport setting to the plugin activation code and set it to: true

jQuery('#slidetabs').slidetabs({
    touchSupport: true
});

Hardware-accelerated CSS3 animations are enabled by default for better performance on mobile devices.

Note: To disable touch interaction for individual elements inside the content panes, add the class 'st_no_touch'.

jQuery Plugin - Troubleshooting

Follow the steps below to troubleshoot issues with the SlideTabs jQuery plugin:

  • The jQuery library should only be included once on your website. Including multiple version will create conflicts with the jQuery plugins/scripts on your site.
  • Include the jQuery library before any of your jQuery plugins/scripts.
  • Make sure to use the correct syntax when adding the plugin settings. For example; true should not have any quotes '' around. See plugin settings for the full overview.
  • Make sure you are not getting any JavaScript error messages in your browser. This can cause the plugin to stop working.
  • Make sure you have enabled JavaScript in your browser.

WordPress Plugin - Installation

Automatic Installation

Login to your WordPress Administration panel. In the left menu you will see a "Plugins" option. Toggle it open, and click "Add New". You will be redirected to the Install Plugins screen. Click "Browse", select the slidetabs.zip file and click "Install Now".

Manual Installation

Extract the slidetabs.zip file and upload the "slidetabs" folder inside to the wp-content->plugins directory of your WordPress installation.

Activate the Plugin

After Installing the plugin it needs to be activated. Click the "Plugins" link in the admin sidebar, you will be redirected to the Plugins overview page. Find "SlideTabs for WordPress" in the list of plugins and click the "Activate" link:

After the plugin is activated, the SlideTabs menu will appear in the admin sidebar:

WordPress Plugin - Using the Plugin

Usage guides for the WordPress plugin can be found under 'Help' in the plugin sidebar menu.

WordPress Plugin - Using the Shortcode

Shortcode Generator

You can use the SlideTabs shortcode generator button on the WordPress editor to include the tabs in a post or page. Click the button to open the dialog window, select the tabs you want to include and click "Insert" to add the shortcode to the content:

Enter Shortcode Manually

Enter [slidetabs id="123"] into a post or page, where "123" should be the ID of the tabs you want to include.

WordPress Plugin - Using the Template Tag

Including SlideTabs directly into your WordPress theme is made simple by using the slidetabs() PHP template tag.

<?php slidetabs(id, array('width' => 700, 'height' => 350)); ?>

The first parameter of the template tag is the ID of the tabs, and the second parameter (optional) is an array with the dimensions. The second parameter will override the defined width and height values specified in the admin page.

WordPress Plugin - General Plugin Settings

The "Plugin Settings" page lets you enable/disable scripts used by the SlideTabs plugin. This makes it easier to avoid conflicts and optimize your website.

WordPress Plugin - Troubleshooting

Follow the steps below to troubleshoot issues with the SlideTabs WordPress plugin:

  • Check that your webhost is running PHP v5.2.1+ and WordPress v3.0+.
  • Make sure your WordPress theme is including both the wp_head() and wp_footer() functions. Also make sure <?php wp_head(); ?> is the last thing loading in your <head> tag.
  • If you need to load JavaScript for your WordPress theme, make sure you are using the wp_enqueue_script() function. See http://codex.wordpress.org/Function_Reference/wp_enqueue_script for more information on how to implement this.
  • Make sure the slider shortcode has not been wrapped in any HTML tags (use the HTML editor to check).
  • Try using the default Twenty Ten/Eleven theme instead of your custom theme to see if could be a theme conflict.
  • Try disabling all other plugins then re-enable them one-by-one to find which one causes a conflict.
  • Make sure you have enabled JavaScript in your browser.

CSS Templates - Using the Templates (jQuery Plugin)

Note: This guide is meant for the jQuery plugin. The WordPress version will add the template files automatically.

Include the Template File(s)

To use the SlideTabs templates, you first need to include the template file(s) you want to use in the <head> of your HTML (a template file is simply a CSS stylesheet):

<!-- Include the template stylesheet in the <head> of your HTML -->
<link rel="stylesheet" href="templates/clean/template.css" type="text/css" />

The template files are located in the slidetabs->templates folder.

Add the Container Class

To use the template(s) you have included, set the template name as the tabs main container class. So to use the 'clean' template, add the clean-horizontal or clean-vertical class (depending on what layout you want to display).

<!-- Tabs using the 'clean' template with -horizontal- layout -->
<div id="slidetabs" class="clean-horizontal">
	...
</div>

Use <template name>-vertical for displaying the vertical layout:

<!-- Tabs using the 'clean' template with -vertical- layout -->
<div id="slidetabs" class="clean-vertical">
	...
</div>

Note: If you want to change the tabs position, take a look at: this guide.

CSS Templates - Creating Custom Templates

Folder Name

You can create your own templates by following a few simple steps. Go to the slidetabs->templates plugin directory, copy/paste the 'clean' folder and rename it. For this example we will rename it to 'custom'.

Note: The folder name should not contain any spaces.

Inside the new 'custom' folder you will find the template stylesheet: template.css. The template.css file should not be renamed as the template will not be found by the plugin if the name is changed.

Header Information

Next we need to edit the header information in the template.css file. Enter the details you want about your template.

WordPress Plugin: "Template Name" is the name that will display in the Admin panel and should not be left blank.

/* 
	Template Name: Custom
	Template URI:
	Description: Custom SlideTabs template.
	Version: 1.0
	Author:
	Author URI:
*/

Style Structure (prefix)

All the styles in the template.css file should be prefixed with the template's folder name ("custom"). The easiest way to do this is to use the "find and replace" function in your text editor, and replace 'clean' with 'custom'.

Below is an example of how it should look with the prefixed names changed:

div.custom-horizontal { /* The main container */	
	position:relative;
	clear:both;
	width:850px;
}

div.custom-horizontal div.st_tabs { /* Tabs main container */		
	position:relative;
	z-index:100;		
	width:100%;	
	height:43px;
	margin-bottom:-1px;	
	overflow:hidden;
}

Note: The "-horizontal" and "-vertical" prefix is what determines if the style is used for the horizontal or vertical tabs.

Dynamic Templates (WordPress Plugin)

The dynamic templates can be customized just like the static templates but includes an extra layout.thml file that contains the markup for the dynamic content.

The dynamic templates are located in the slidetabs->templates_dynamic folder.

The CSS

The styles for the dynamic templates can be found in the template.css file just like the static templates. The dynamic templates contains some additional CSS at the bottom of the file that is used to style the content in the layout.thml file:

...

/* Dynamic Content
-------------------------------------------------------------------------------- */

div.clean div.dyn_content { /* Dynamic content container */
    float:left;
	width:201px;
	margin:0;
    padding:23px;
}
...

The Layout File

Each dynamic template contains a layout.thml file (PHP + HTML template file). This file contains the markup for the dynamic content.

To modify the layout.thtml file, you need a text editor. Any text editor like notepad will work, but it's better to use a more powerful code editor with syntax highlighting.

<?php
/*
	Description: Two column layout. Content left and image right.
	Version: 1.0
*/

/*
	The following variables are available for use in the template below:
		
	$author       - Post author display name
	$author_url   - URL to post author (if available)
	$categories   - Comma-separated category links
	$date         - Post published date.
	$excerpt      - Post content excerpt
	$image_src    – Image URL
	$image_title  - Image title text
	$image_width  – Image width (in pixels)
	$image_height – Image height (in pixels)
	$permalink    - Post permalink
	$tags         - Comma-separated tag links (if available)
	$time         - Post published time.
	$timesince    - Time since the entry was published
	$title        - Post title
*/
?>
<div class="dyn_content">
    <h1><?php echo $title; ?></h1>
    <p class="dyn_timesince"><?php echo $timesince; ?> ago</p>
    <div class="dyn_excerpt"><?php echo $excerpt; ?></div>
    <a href="<?php echo $permalink; ?>" class="dyn_permalink">read more</a>
</div>

<div class="dyn_image">
    <img src="<?php echo $image_src; ?>" width="<?php echo $image_width; ?>" height="<?php echo $image_height; ?>" />
</div>

At the top of the file you can see a list of the available PHP variables that contains the various content that can be displayed. Some basic PHP knowledge is required for modifying the layout file.

Converting a Static Template

You can convert any of the static templates into a dynamic template by following a few simple steps:

  • Copy the static template folder you want to convert from the slidetabs->templates folder and paste it into the slidetabs->templates_dynamic folder.
  • Give the template a unique name. You can see how to do this in the: Creating Custom Templates guide.
  • Copy the layout.thml file from one of the dynamic templates in the slidetabs->templates_dynamic folder and paste it into the root of the new template folder you created.
  • Open the template.css file inside the same dynamic template folder you copied the layout.thml file from. Go to the bottom of the document, copy the dynamic content styles (after the 'Dynamic Content' comment) and paste them into the template.css file of the new template. Make sure you give the styles the correct prefix as explained in the Creating Custom Templates guide.
  • Done! You now have a working dynamic template. You can modify the layout file (see 'The Layout File' above) and style the content any way you want in the template.css file.

External Linking - How to Use

External Linking

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

Enable the externalLinking setting:

$('#slidetabs').slidetabs({
    externalLinking: true
});

Create the external link (anchor tag):

<a href="#tab-2" class="st_ext" rel="tabs_container_id">Activate Tab 2</a>
  • External-Link Attributes:
  • href : Must match the rel attribute of the tab you want to activate/open.
  • class : Each external link must have the st_ext class.
  • rel : Must match the main container id of the tabs you want to target.

Linking from the URL

You can also target tabs with the URL:

http://www.your-site.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 in the plugin settings.