Hierarchical jQuery tabs

Dear Experts,

I found an easy jQuery tabs at this link:

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.
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

/* 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;}

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


<div class="tabs">

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

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



<script language="javascript">

	$("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

		//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
		$("div.panes div.pane:eq(" + ind + ")").fadeIn();




Open in new window


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
CFDAAuthor Commented:
Very good, thanks.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.