<!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>
<h1>jQueryUI nested tab openend from hash</h1>
<h3>
Give the url an hash off #subtab2 so it opens tab2 AND subtab2 <br />
Working url: <a href="http://run.plnkr.co/plunks/Wr91Bm/#subtab2">http://run.plnkr.co/plunks/Wr91Bm/#subtab2</a><br />
See code: <a href="http://plnkr.co/Wr91Bm">http://plnkr.co/Wr91Bm</a>
</h3>
<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>
<p>
Tab below is without the fix. It opens the default #tab1 and the #subtab2. <br />
(Try too manualy press Tab2 too see the correct subtab has openend
</p>
<div class="tabs broken">
<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>
// 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);
}
}
}
}
/* Styles go here */
.fix {
background: green;
background: rgba(0,255,0,0.3);
}
.broken {
background: red;
background: rgba(255,0,0,0.3);
}