Multiple Tabs

jQuery Code:

jQuery.Switchable is possible to instantiate multiple Tabs instances with a single call. Here you can see five different Tabs where the last three of them have been nested under the second Tabs instance. This whole thing has been setup with a single call as follows:

	$(function(){
		$(".tabs-trigger").switchable("> .tabs-panel");
	});
	

The jQuery selector: "> .tabs-panel" searches for panels under the wrapper element. This is the key. Of course you can always instantiate your Tabs separately but you need to supply different selector for the panels. For example:

	$(function(){
		$("#tabs1").switchable("#panel1 > div");
		$("#tabs2").switchable("#panel2 > div");
	});
	

HTML Code:

Now how do we know which panels belong to which Tabs? The solution is to enclose each trigger/panel combination inside the same parent (or wrapper) element. Here is my setup:

	<div>
		
		<div class="tabs-trigger">
			<a href="#First">First</a>
			<a href="#Second">Second</a>
			<a href="#Third">Third</a>
		</div>
		<div class="tabs-panel">
			<p>Tab Panel 1 <a href="#Third">Open third tab</a></p>
		</div>
		<div class="tabs-panel">
			<p>Tab Panel 2</p>
		</div>
		<div class="tabs-panel">
			<p>Tab Panel 3 <a href="#Second">Open second tab</a></p>
		</div>
	</div>
	
	<div>
		
		<div class="tabs-trigger">
			<a href="#First">First</a>
			<a href="#Second">Second</a>
			<a href="#Third">Third</a>
		</div>
		<div class="tabs-panel">
			<p>Tab Panel 1</p>
			
			
			[ nested Tabs #1 ]
		</div>
		<div class="tabs-panel">
			<p>Tab Panel 2</p>
			
			
			[ nested Tabs #2 ]
		</div>
		<div class="tabs-panel">
			<p>Tab Panel 3</p>
			
			
			[ nested Tabs #3 ]
		</div>
	</div>
	

Each nested Tabs are contained within a separate div.tabs-panel which work as their wrapping element and they do not need any extra wrapper.