Progress bar Accordion

Tabs

Tabs are generally used to break content into multiple sections that can be swapped to save space, much like an accordion. By default a tab widget will swap between tabbed sections onClick, but the events can be changed to onHover through an option. Tab content can be loaded via Ajax by setting an href on a tab.

How to create Tabs?

1. Initialize the plugin

jQuery(function() {
	jQuery(" .ui_tabs ").tabs();
});

2. Create the HTML using the same class used in the code above:

<div class="ui_tabs">
	...
</div>

2.1 Create tabs list:

<div class="ui_tabs">
	<ul>
		<li><a href="#tabs-1">Tabs 1</a></li>
		<li><a href="#tabs-2">Tab 2</a></li>
		<li><a href="#tabs-3">Tab 3</a></li>
	</ul>
</div>

2.2 Create tabs sections using as ID the same text from tabs list, href="" attribute:

<div class="ui_tabs">
	<ul>
		<li><a href="#tabs-1">Tabs 1</a></li>
		<li><a href="#tabs-2">Tab 2</a></li>
		<li><a href="#tabs-3">Tab 3</a></li>
	</ul>
	<div id="tabs-1">
		<p> THIS IS THE TEXT FOR FIRST TAB</p>
	</div>
	<div id="tabs-2">
		<p> THIS IS THE TEXT FOR SECOND TAB</p>
	</div>
	<div id="tabs-3">
		<p> THIS IS THE TEXT FOR THIRD TAB</p>
	</div>
</div>

How to create Tabs with Navigation aligned to right?

This has a little different structure. The main goal is to create a "tab-ified box".

1. Initialize the plugin

jQuery(function() {
	jQuery( ".ui_tabs_right" ).tabs();
});

2. Create a box with class "ui_tabs_right":

<section class="grid_12">
	<div class="box ui_tabs_right">
		<div class="title"> Tabs aligned to right </div>
		
		<div class="inside">
			<div class="in">
				CONTENT TO BE HERE...
			</div>
		</div>
		
	</div>
</section>

3. Create tab navigation. You must include it inside of box title:

<section class="grid_12">
	<div class="box ui_tabs_right">
		<div class="title"> 
			Tabs aligned to right 
			<ul>
				<li><a href="#tabs-1a">Tab 1</a></li>
				<li><a href="#tabs-2a">Tab 2</a></li>
				<li><a href="#tabs-3a">Tab 3</a></li>
			</ul>			
		</div>
		
		<div class="inside">
			<div class="in">
				CONTENT TO BE HERE...
			</div>
		</div>
		
	</div>
</section>

4. Create tabs sections using as ID the same text from tabs list, href="" attribute:

<section class="grid_12">
	<div class="box ui_tabs_right">
		<div class="title"> 
			<span class="icon16_sprite i_abacus"></span> <!-- Additional box icon ;) -->
			Tabs aligned to right 
			<ul>
				<li><a href="#tabs-1a">Tab 1</a></li>
				<li><a href="#tabs-2a">Tab 2</a></li>
				<li><a href="#tabs-3a">Tab 3</a></li>
			</ul>		
		</div>
		
		<div class="inside">
			<div class="in">
				
				<div id="tabs-1a">
					<div class="grid_12">
						<p>Tabs section 1 content</p>
					</div>
				</div>
				<div id="tabs-2a">
					<div class="grid_12">
						<p>Tabs section 2 content</p>
					</div>
				</div>
				<div id="tabs-3a">
					<div class="grid_12">
						<p>Tabs section 3 content</p>
					</div>
				</div>
				
			</div>
		</div>
		
	</div>
</section>

Options

Progress bar Accordion