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:

  Copy

  <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:

  Copy

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

Settings

Related Articles