“TurboTabs - Responsive Tab jQuery Plugin” Documentation by “Aleksej Vukomanovic” v1.1


“TurboTabs”

Created: 25/03/2015
Last Updated: 23/04/2015
Version: 1.1
By: Aleksej Vukomanovic
Email: support@themeflection.com

Thank you for using my plugin! If you like it feel free to use it in both personal or comercial projects, it is licenced by MIT Licence. No attribution is required, however I will appreciate any backlink or social share mention you make :)


Table of Contents

  1. HTML Structure
  2. Requirements
  3. Usage
  4. Options
  5. ChangeLog

A) HTML Structure - top

TurboTabs has very simple markup:

Tab HTML

Just replace <div id="main"> with your unique ID. This <div> element will hold tabs and will be used to initialize the plugin. You can use as many tabs as you want on one page, just make sure to use unique ID for each <div>

<ul class="tt_tabs"> holds navigation tabs and <div class="tt_tab"> holds tab panels where you can place any content you want. If you are placing only text, wrap it with <p> tags for best results.

Setting the Active tab content opened by default (the one you see when page is loaded) is easy. As seen in markup, just add active class to the chosen .tab and appropriate <li> element from .tt_tabs (tab navigation)


B) Requirements - top

This plugins requires jQuery Library in order to work. Besides that you need to include main plugin file - turbotabs.min.js and three CSS files: turbotabs.css, font-awesome.min.css and animate.css

tab

Note

Do not forget to include jQuery before the turbotabs.js

Considering CSS files:

tab

Only turbotabs.css is required, if you want to include tab transition effects then you should include animations.css . Font-awesome is also optional, it is required only in case you want to include some icons with tab navs.

If you want to inlcude icons add <i> or <span> element with class of the choosen icon before the nav title.

		<ul class="tabs">
			<li> <i class="fa fa-user"></i>  Your nav title </li> 
			<li> <i class="fa fa-home"></i>  Your nav title </li>
			<li> <i class="fa fa-comment"></i>  Your nav title </li>
				..... etc ....
		</ul>						

		

C) Usage - top

It is as simple as this:

tab

This will initialize default tab as seen on demo page:

tab

D) Options - top

TurboTabs Options

Option

Default

Parameters

Usage

Animation Scale Scale, Slide, SlideDown, SideBounce, Bounce Creates entrance/exit animation on tab content change. String format
mode horizontal Horizontal, vertical, or accordion. Changes the layout of the tab. String format
navAlign left left, right or center. Changes the alignment of the nav tabs. Works with horizontal(Default) mode. String format
textColor #ffffff You can enter any color you want, be it in HEX (#) code or RGB / RGBA format. This option is pretty straightforward, it edits the color of the text in both tab navs and tab content.
headingTextColor #fff You can enter any color you want, be it in HEX (#) code or RGB / RGBA format. This option changes the color of the accordion heading text when responsivley resized on smaller screens or when mode is set to accordion
backgroundColor rgba(6,13,19,0.7) You can enter any color you want, be it in HEX (#) code or RGB / RGBA format. This edits background color of the tab content (primary .container holder).
navBackground #929292 You can enter any color you want, be it in HEX (#) code or RGB / RGBA format. This edits background color of the tab navs (ul.tabs holder).
hoverColor #ffffff You can enter any color you want, be it in HEX (#) code or RGB / RGBA format. This edits text color of the tab navs on mouse hover (ul.tabs li).
hoverBackground rgba(6,13,19,0.84) You can enter any color you want, be it in HEX (#) code or RGB / RGBA format. This edits background color of the tab navs on mouse hover (ul.tabs li).
activeBackground rgba(6,13,19,0.7) You can enter any color you want, be it in HEX (#) code or RGB / RGBA format. This edits background color of the tab nav when it is currently active (ul.tabs li clicked).
navTextShadow on on, off This enables/disables nav title and accordion heading text shadow. String format
navTextShadowColor dark dark, light Requires navTextShadow option to be set to 'on'. This option changes the color of the nav title and accordion heading shadow. String format
width 60% from 1% to 100%, or any number of px (eg: 500px). Sets the width of the tab. Can be set in both % or px. Width format( % or px) must match padding format. String format
padding 20% from 1% to 100%, or any number of px (eg: 60px). Sets the padding of the tab. In this case 20% padding on the left and 20% on the right. Padding format( % or px) must match width format. It can help you to center the tab on the screen or simply move it to the corner you want. Can be set in both % or px. String format

To use any of the option above add it between curley brackets when initializng plugin:

tab

ChangeLog

Version 1.0 Initial release
Version 1.1
  • Added 28 animations
  • added tt_prefixes to fix compatibility issues with other CSS frameworks such as foundation and bootstrap.

Aleksej Vukomanovic

Go To Table of Contents


Psst.. TurboTabs WordPress Version is released.
Find Out More