In this tutorial, we will learn Jquery UI Nested Tabs Example

In this section, you will create nested tabs in jquery UI. we will show examples of jquery UI nested tabs. I will jquery UI using create nested tabs. tabs view In other tab view create using jquery UI. We will make sub tabs using jquery and jquery UI. I will show an easy example of jquery UI sub-tabs


<!DOCTYPE html>
    <title>Jquery UI Nested Tabs Example -</title>
    <link rel="stylesheet" href="">
    <script data-require="jquery@2.1.1" data-semver="2.1.1" src=""></script>
    <script data-require="jquery-ui@1.10.4" data-semver="1.10.4" src=""></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
<style type="text/css">
  .fix {
    background: green;
    background: rgba(0,255,0,0.3);
  .broken {
    background: red;
    background: rgba(255,0,0,0.3);
      Tabs below is working how we expect it. It opens tab2 and subtab2 on a pageload.
    <div class="tabs fix">
          <a href="#tabs-1">Tab 1</a>
          <a href="#tabs-2">Tab 2</a>
          <a href="#tabs-3">Tab 3</a>
      <div class="tabContainer">
        <div id="tabs-1" class="tabContent">
          <p>Some content 1.</p>
        <div id="tabs-2" class="tabContent">
          <div class="subtabs">
              <li><a href="#subtab1">Subtab1</a></li>
              <li><a href="#subtab2">Subtab2</a></li>
            <div id="subtab1" class="subtabContent">
             Some sub content1 
            <div id="subtab2" class="subtabContent">
             Some sub content2
        <div id="tabs-3" class="tabContent">
          <p>Some content 3</p>

blow the nested tabs of jqueryui script code add:

<script type="text/javascript">
  // Code goes here
$(document).ready(function() {
  jQuery( ".tabs" ).tabs();
  jQuery( ".subtabs" ).tabs();
function openParentTab() {
  locationHash = location.hash.substring( 1 );
  // Check if we have an location Hash
  if (locationHash) {
    // Check if the location hash exsist.
    var hash = jQuery('#'+locationHash);
    if (hash.length) {
      // Check of the location Hash is inside a tab.
      if (hash.closest(".tabContent").length) {
        // Grab the index number of the parent tab so we can activate it
        var tabNumber = hash.closest(".tabContent").index();
        jQuery(".tabs.fix").tabs({ active: tabNumber });
        // Not need but this puts the focus on the selected hash
        setTimeout(function() {
        }, 1000);

May this example help you.