Hierarchical jQuery tabs

Dear Experts,

I found an easy jQuery tabs at this link:
http://www.apricot-studios.com/lab/jquery/jquery-tabs-tutorial.php

I was wondering, if anyone can help me to change the tabs to Hierarchical view, so the tabs (Tab one, Tab two ...) from the top to right as the photo attached with this question.

Thanks in advance.
Regards.
tabs-jpg.jpg
CFDAAsked:
Who is Participating?
 
Steve KrileCommented:
I went a different direction than the original sample you found.  Let me know what you think.

The keys here are relying on jquery's .index() to identify the "position" of each list item.  Then, you have another collection of div elements (in the panes) div that are also accessible through jquery's .index() ability.

So, as long as you have the same number of tabs as panes, this process works.  And maybe more importantly, the number of panes and tabs doesn't matter (styling not-withstanding of course).  You can add tabs and panes without having to touch the jquery.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>


/* universal reset */

* {
	margin: 0;
	padding: 0;
	}

/*  body */

body {
	font: small "Lucida Grand", "Lucida Sans Unicode", Helvetica, verdana, arial, sans-serif;
	width: 600px;
	margin-left: -300px;
	position: absolute;
	left: 50%;
	margin-top: 50px;
	}


.tabs {width:600px;position:relative;}
.tabs ul  {padding:0;margin:0;list-style-type:none;position:absolute;top:5px;left:400px;}
.tabs ul li {display:block;height:20px;width:80px;}
.tabs ul li a {display:block;padding:4px;width:100%;height:12px;text-decoration:none;color:gray;outline:none;}
.tabs ul li a:hover, a.current {background:#c1c1c1;color:#000;border:solid 1px gray;}

.pane {display:none;}
.panes{margin-left:0px;width:391px;border:solid 1px gray;padding:4px;}


</style>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

</head>
<body>

<div class="tabs">

	<ul>
		<li><a href="#">Tab One</a></li>
		<li><a href="#">Tab Two</a></li>
		<li><a href="#">Tab Three</a></li>
		<li><a href="#">Tab Four</a></li>
	</ul>


	<div class="panes">
		<div class="pane">
			<h3>Tab 1</h3>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec, mattis semper, leo. Maecenas blandit risus vitae quam. Vivamus ut odio. Pellentesque mollis arcu nec metus. Nullam bibendum scelerisque turpis. Aliquam erat volutpat.</p>
		</div>

		<div class="pane">
			<h3>Tab 2</h3>
			<p>Morbi leo turpis, pellentesque at, luctus et, ornare non, risus. Vivamus orci. Integer placerat aliquam sem. Ut eu nisl in tortor iaculis convallis. Duis accumsan quam sit amet ipsum. Nam pretium. Vestibulum varius sollicitudin eros. Aenean imperdiet dignissim lacus. Donec lacinia turpis ac urna. Nulla libero augue, fringilla et, vulputate dictum, volutpat sit amet, justo. Integer eu lectus sed neque tempus pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent dapibus, urna ac luctus bibendum, augue libero tincidunt dui, ac fringilla odio metus sed purus. </p>
		</div>

		<div class="pane">
			<h3>Tab 3</h3>
			<p>Integer adipiscing mollis purus. Duis mattis purus et purus. Mauris in pede sit amet nunc tincidunt rhoncus. In hac habitasse platea dictumst. Phasellus at nulla quis arcu pharetra commodo. Mauris suscipit. Nulla sagittis. Morbi fermentum feugiat leo. Vivamus sapien nulla, commodo ut, convallis eget, ullamcorper ut, sapien. Praesent sodales varius pede. </p>
		</div>

		<div class="pane">
			<h3>Tab 4</h3>
			<p>Integer libero. Aenean porttitor, nibh viverra porttitor eleifend, nulla erat malesuada mauris, a facilisis lacus justo ac enim. Fusce viverra, eros eu cursus posuere, eros nunc viverra turpis, a lacinia arcu nulla nec sem. Curabitur a augue. Pellentesque commodo pede quis quam. Sed sapien ligula, accumsan sed, lobortis vitae, malesuada vitae, est. Duis mollis. Curabitur feugiat ullamcorper ligula. Nullam lectus lacus, congue vel, dictum eu, mattis vel, pede. Quisque auctor felis quis justo.</p>
		</div>

	</div>


</div>

<script language="javascript">

$(document).ready(function(){
	$("div.panes div.pane:eq(0)").show();
	$("div.tabs ul > li:eq(0) a").addClass("current");

	$("div.tabs ul > li").click(function(e){
		//turn off normal behavior
		e.preventDefault();

		//used to identify the relative position of this list item - which will be assumed
		//to be the relative position of the div.pane we want to reveal
		var ind = $(this).index();

		//remove the current class from all links and div.pane
		$("div.tabs ul > li > a").removeClass("current")
		$("div.panes div.pane").hide();

		//add the current class to this anchor tag
		$(this).children("a").addClass("current");
		$("div.panes div.pane:eq(" + ind + ")").fadeIn();

	});
});




</script>

</body>
</html>

Open in new window

0
 
Julian HansenCommented:
Also take a look at jqueryui.com and http://flowplayer.org/tools/index.html (jquery.tools)

Might find their implementation does what you need
0
 
CFDAAuthor Commented:
Very good, thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.