Skip to content

Instantly share code, notes, and snippets.

@saileshkush95

saileshkush95/Tabs with in Tabs

Created April 30, 2020 10:13
Show Gist options
  • Save saileshkush95/dd5a98368a208fb3aea69a08267049e2 to your computer and use it in GitHub Desktop.
Save saileshkush95/dd5a98368a208fb3aea69a08267049e2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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="[email protected]" data-semver="2.1.1"
src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="[email protected]" 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);
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment