Submit your widget

Very Cool Multiple tabs plugin with jQuery

Created 3 years ago   Views 8144   downloads 1865    Author themeflection
Very Cool Multiple tabs plugin with jQuery
View DemoDownload 391.8 KB
18
Share |

TurboTabs is responsive Tabs  jQuery Plugin with plenty of options. HTML markup is very simple to follow , jQuery will do all the magic. Tab transforms into an accordion on smaller devices, but there is also an option to use it as accordion instead of the tab if you like.

HTML

(Update note: As of version 1.1 use prefix tt_ – tt_tabs, tt_tab and tt_container)

<div id="myTab" class="tabs" >
            <!-- - - - - - Tab navigation - - - - - - -->
            <ul class="tabs">
                <li class="active">Tab 1</li>
                <li>Tab 2</li>
                <li> Tab 3</li>
                <li>Tab 4</li>
            </ul>
            <!-- - - - - Tab Content - - - - - -->        
                <div class="tab active">  
                </div>

                <div class="tab"> 
                </div>

                 <div class="tab">
                   
                </div>

                <div class="tab">
                    
                </div>

            </div><!-- .container -->

    </div>

CSS:

(Update note: as of version 1.1 – use animate.min.css instead of animations.css)

<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<link rel="stylesheet" type="text/css" href="css/turbotabs.css">

Note – animate.min.css (CSS animations library) is  included in case you want to use animations when tabs are switched and font-awesome.min.css if you use tab with icons. Other way if you want to use just simple tab without any animation or icons include only turbotabs.css  (plugin’s main stylesheet).

Read more:http://themeflection.com/plug/turbotabs-responsive-tabs-jquery-plugin/

Tag: tabs