saileshkush95/Tabs with in Tabs

## Tabs with in Tabs
# index.html


<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="//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="//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="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

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

# script
// 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);
      }
    }
  }
}
	# index.html


	<!DOCTYPE html>
	<html>

	<head>
	<link rel="stylesheet" href="//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="//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="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
	<link rel="stylesheet" href="style.css" />
	<script src="script.js"></script>
	</head>

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

	# script
	// 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);
	}
	}
	}
	}