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


Example:

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


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();
  
  openParentTab();
});
function openParentTab() {
  locationHash = location.hash.substring( 1 );
  console.log(locationHash);
  // 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
        hash.get(0).scrollIntoView();
        setTimeout(function() {
          hash.get(0).scrollIntoView();
        }, 1000);
      }
    }
  }
}
</script>

May this example help you.