My contemplations and diurnal novelties are publicized here


I recently came across a situation where I have to implement multiple tabs within a tab. Googling around doesn’t work for me so I prefer to publish mine. You can see a working example here http://jsfiddle.net/hellowahab/5vtZ6/show/    OR  You can play with the code here http://jsfiddle.net/hellowahab/5vtZ6

Pre-requisites files to include

<script type=”text/javascript” src=”jquery.min.js”></script>

<script type=”text/javascript” src=”organictabs.jquery.js”></script>  (Code can be found from the example above)

Some styling added to the tabs

<style>

/* Generic Utility */

.hide { display: none; }

.clear { clear: both; }

/* Specific to example three */

#main-profile-tab .contents-level-1 { /*background: #eee;*/ padding: 0px 10px 10px 0px; margin: 0 0 5px 0; }

#main-profile-tab ul { list-style: none; }

#main-profile-tab ul li a { display: block; border-bottom: 1px solid #666; padding: 4px; color: #666;

border-radius: 2px;

-moz-border-radius: 2px;

-khtml-border-radius: 2x;

-webkit-border-radius: 2px;}

#main-profile-tab ul li a:hover { background: #999; color: white; }

#main-profile-tab ul li:last-child a { border: none; }

#main-profile-tab .nav { overflow: hidden; margin: 0 0 10px 0; }

#main-profile-tab .nav li { float:left;margin:0 5px 0 0; line-height: 20px; }

#main-profile-tab .nav li.last { margin-right: 0; }

#main-profile-tab .nav li a { display: block; padding: 2px 8px; background: #4eb7cd; color: white; font-size: 11px; text-align: center; border: 0; }

#main-profile-tab li a.current,#main-profile-tab li a.current:hover { background-color: #013775; color: white; }

#main-profile-tab .nav li a:hover, #main-profile-tab .nav li a:focus { background: #999;}

#main-profile-tab .contents-level-1 .headings-level-2 { overflow: hidden; }

#main-profile-tab .contents-level-1 .headings-level-2 li{ float: left; margin:0 5px 0 0; line-height: 20px; /*width: 80px; */ }

#main-profile-tab .contents-level-1 .headings-level-2 li a { display: block; padding: 2px 8px; background: #4eb7cd; color: white; font-size: 11px; text-align: center; border: 0; }

#main-profile-tab .contents-level-1 .headings-level-2 li a:hover { background: #999; color: white; }

#main-profile-tab .contents-level-1 .headings-level-2 li a.current,

#main-profile-tab .contents-level-1 .headings-level-2 li a.current:hover { background-color: #013775; color: white; }

#main-profile-tab .contents-level-1 .contents-level-2 { padding: 5px; }

#main-profile-tab .contents-level-1 .headings-level-3 { overflow: hidden; }

#main-profile-tab .contents-level-1 .headings-level-3 li{ float: left; margin:0 5px 0 0; line-height: 20px; /*width: 80px; */ }

#main-profile-tab .contents-level-1 .headings-level-3 li a { display: block; padding: 2px 8px; background: #4eb7cd; color: white; font-size: 11px; text-align: center; border: 0; }

#main-profile-tab .contents-level-1 .headings-level-3 li a:hover { background: #999; color: white; }

#main-profile-tab .contents-level-1 .headings-level-3 li a.current,

#main-profile-tab .contents-level-1 .headings-level-3 li a.current:hover { background-color: #013775; color: white; }

#main-profile-tab .contents-level-1 .contents-level-3 { padding: 5px; }

#tabbed-area-2 { padding-bottom: 10px; }

</style>

Actual Javascript that will help you create tabs

<script>

$(function () {

// Nested tabs

$(“#main-profile-tab”).organicTabs({

headingsSelector: “.headings-level-1”,

contentsSelector: “.contents-level-1”

});

$(“#main-profile-tab .contents-level-1”).organicTabs({

headingsSelector: “.headings-level-2”,

contentsSelector: “.contents-level-2”

});

$(“#main-profile-tab .contents-level-1 #tabbed-area-3”).organicTabs({

headingsSelector: “.headings-level-3”,

contentsSelector: “.contents-level-3”

});

});

</script>

You HTML Code here

<div id=”page-wrap”>
<div id=”main-profile-tab”>
<ul>
<li><a href=”#featured”>Tab One</a></li>
<li><a href=”#core”>Tab One containing two more tabs</a></li>
</ul>
<div>
<div id=”featured”>
<p>
This is supposed to contain Tab one data.</p>
</div>
<div id=”core”>
<p>
Core Stuff in here!</p>
<div id=”tabbed-area-2″>
<ul>
<li><a href=”#core-1″>Nested Tab 1</a></li>
<li><a href=”#core-2″>Nested Tab 1</a></li>
</ul>
<div>
<div id=”core-1″>
First nested tab’s content
</div>
<div id=”core-2″>
Second nested tab’s content
</div>
</div>
<div>
</div>
</div>
<div id=”tabbed-area-3″>
<ul>
<li><a href=”#corer-1″>Nested Tab 3</a></li>
<li><a href=”#corer-2″>Nested Tab 4</a></li>
</ul>
<div>
<div id=”corer-1″>
Third nested tab’s content
</div>
<div id=”corer-2″>
Forth nested tab’s content
</div>
</div>
<div>
</div>
</div>
</div>
</div>
</div>
</div>

Hope I don’t need to explain the code. I any problem do post the comment.


Advertisements

Comments on: "Multiple nested tabs in organictabs jquery" (1)

  1. Hello there! I know this is kind of off topic but
    I was wondering if you knew where I could get a captcha plugin for my comment form?
    I’m using the same blog platform as yours and I’m having difficulty finding one?
    Thanks a lot!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: