Tabs

Display Below the Fold Content using Elegantly Beautiful & Powerful Tabs.

Code Example

<div class="tabs clearfix" id="tabs">

	<ul class="tab-nav clearfix">
		<li><a href="#tab-1">Tab 1</a></li>
		<li><a href="#tab-2">Tab 2</a></li>
		<li><a href="#tab-3">Tab 3</a></li>
	</ul>

	<div class="tab-container">

		<div class="tab-content clearfix" id="tab-1">
			This is Tab 1 Content
		</div>
		<div class="tab-content clearfix" id="tab-2">
			This is Tab 2 Content
		</div>
		<div class="tab-content clearfix" id="tab-3">
			This is Tab 3 Content
		</div>

	</div>

</div>

How to Use

  • Initializing Tabs using Custom Javascript

    Tabs are initialized using the Standard Minimal Functionality by default, but there might instances when you would have to Create a Custom Functionality for the Tabs using some more options of the jQuery UI Tabs Plugin. To use this you can simply add the .customjs Class to .tabs Container as this will stop it from using the Default Functionality and allow you to extend the Tabs with your own Custom Functionality. Here is an example:

    <div class=”tabs customjs clearfix” id=”tabs”>
    
    	<ul class=”tab-nav clearfix”>
    		<li><a href=”#tab-1″>Tab 1</a></li>
    		<li><a href=”#tab-2″>Tab 2</a></li>
    		<li><a href=”#tab-3″>Tab 3</a></li>
    	</ul>
    
    	<div class=”tab-container”>
    
    		<div class=”tab-content clearfix” id=”tab-1″>
    			This is Tab 1 Content
    		</div>
    		<div class=”tab-content clearfix” id=”tab-2″>
    			This is Tab 2 Content
    		</div>
    		<div class=”tab-content clearfix” id=”tab-3″>
    			This is Tab 3 Content
    		</div>
    
    	</div>
    
    </div>
    Add the following JS Code at the bottom of the Page after the js/functions.js JS File linking:

    <script>
    	jQuery(document).ready( function($){
    		$( “#tabs” ).tabs({
    			collapsible: true,
    			event: ‘mouseover’,
    			show: {
    				effect: “fade”,
    				duration: 400
    			}
    		});
    	});
    </script>

Settings

Setting Description
data-speed

The Fade Effect speed while switching between Tabs in milliseconds.

Ex: data-speed="400"

data-active

The Order Number of the Tab which you want to Activate on Page Load.

Ex: Use data-active="2" to activate the Second Tab.

Last Modified: February 7, 2020