JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
<div id="parentTabSet" class="anyTabSet">
<ul>
<li><a href="#A">parent A</a></li>
<li><a href="#B">parent B</a></li>
<li><a href="#C">parent C</a></li>
<li><a href="#D">parent D</a></li>
<li><a href="#E">parent E</a></li>
</ul>
<div id="A">
<div id="childset1" class="anyTabSet">
<ul>
<li><a href="#A_1">foo</a></li>
<li><a href="#A_2">bar</a></li>
</ul>
<div id="A_1"><p>insert your latin here</p></div>
<div id="A_2">
<!--- this will link to cousin #E.2, with parent tab E --->
<a href="#E_2" class="interTabLink">more information here</a>
</div>
</div>
</div>
<div id="B">
<p>insert your latin here</p>
</div>
<div id="C">
<p>insert your latin here</p>
</div>
<div id="D">
<p>insert your latin here</p>
</div>
<div id="E">
<div id="childset2" class="anyTabSet">
<ul>
<li><a href="#E_1">foo</a></li>
<li><a href="#E_2">bar</a></li>
</ul>
<div id="E_1">stuff</div>
<div id="E_2"><a href="#A_1" class="interTabLink">Go to A_1</a></div>
</div>
</div>
</div>
JavaScript
var mytabs = $('.anyTabSet').tabs();
console.log(mytabs);
$(".interTabLink").click(function( event ){
event.preventDefault();
var id = $(this).attr("href");
console.log(id);
var tab = mytabs.find("li [href='"+id+"']");
console.log(tab);
if ( tab.length ) {
var tabset = tab.closest('.anyTabSet').tabs("select", id);
if ( tabset.length ) {
id = id.replace(/_[0-9]/,'');
tabset.parents('.anyTabSet').tabs("select", id );
}
}
});