Create nested tab instances. The tabs in the example below uses a few additional lines of CSS to create a seamless look.
$(document).ready(function() {
// Nested Tabs 2
$('#nested-tabs-2').slidetabs();
// Nested Tabs
$('#nested-tabs').slidetabs();
// Parent Tabs
$('#parent-tabs').slidetabs({
contentAnim: ''
});
});
/* Parent Tabs */
div#parent-tabs > div.st_tabs ul li a {
padding: 0 30px;
color: #676767;
background: #fcfcfc;
background: -moz-linear-gradient(center top , #ffffff, #fcfcfc);
}
div#parent-tabs > div.st_tabs ul li a.st_tab_active {
padding-bottom: 2px;
color: #000;
background: #f3f3f3;
}
div#parent-tabs > div.st_views {
height: auto;
}
div#parent-tabs > div.st_views div.st_view_inner {
padding: 0px;
}
/* Nested Tabs */
div#parent-tabs div.separated_2-horizontal {
width: 100%;
}
div#parent-tabs div.separated_2-horizontal > div.st_tabs {
width: auto !important;
height: 38px;
margin-bottom: 0;
padding: 14px 14px 13px;
border-radius: 0;
background: #f3f3f3;
background: -moz-linear-gradient(center top , #f3f3f3, #f1f1f1);
}
div#parent-tabs div.separated_2-horizontal > div.st_tabs ul li a {
font: bold 12px/36px Arial, Helvetica, sans-serif;
height: 36px;
margin: 0 3px 0 0;
padding: 0 15px;
border-radius: 4px;
}
div#parent-tabs div.separated_2-horizontal > div.st_views {
height: 360px;
border-right: 0 none;
border-bottom: 0 none;
border-left: 0 none;
border-radius: 0;
}
div#parent-tabs div.separated_2-horizontal > div.st_views div.st_view_inner {
padding: 27px;
}