Extending LeftAndMain and Add Tabs - tabs

Question

I'm taking a long shot at trying to get tabs functional in my LeftAndMain Extension.
I couldn't find any documentation on how one would achieve this so I was just looking at the "Settings" tab setup in the Admin panel.
As I said, long shot :P
This makes them appear beautifully as tabs, however the toggle-between functionality isn't working due to a JS error:
jquery.js:551 Uncaught Error: jQuery UI Tabs: Mismatching fragment identifier.
/mymodule/templates/MyAdmin_Content.ss
<div class="cms-content center $BaseCSSClasses" data-layout-type="border" data-pjax-fragment="Content">
<div class="cms-content-header north">
<div class="cms-content-header-info">
<% include CMSBreadcrumbs %>
</div>
<div class="cms-content-header-tabs cms-tabset-nav-primary ss-ui-tabs-nav ss-tabset">
<ul class="cms-tabset-nav-primary ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"
role="tablist">
<li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0"
aria-controls="Root_Servers" aria-labelledby="ui-id-1" aria-selected="true"><a
href="#Root_Servers" class="ui-tabs-anchor" role="presentation"
tabindex="-1">Main</a></li>
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="Root_Settings"
aria-labelledby="ui-id-2" aria-selected="false"><a
href="#Root_Settings" class="ui-tabs-anchor"
role="presentation" tabindex="-1" id="ui-id-2">Access</a></li>
</ul>
</div>
</div>
<div class="cms-content-fields cms-panel-padded center">
<fieldset>
<div id="Root" class="field CompositeField tabset">
<div id="Root_Servers" class="tab ui-tabs-panel ui-widget-content ui-corner-bottom"
aria-labelledby="ui-id-1" role="tabpanel" aria-expanded="true" aria-hidden="false"
style="display: none;">
TAB 1
</div>
<div id="Root_Settings" class="tab ui-tabs-panel ui-widget-content ui-corner-bottom"
aria-labelledby="ui-id-2" role="tabpanel" aria-expanded="false" aria-hidden="true"
style="display: block;">
TAB 2
</div>
</div>
</fieldset>
</div>
<div class="cms-content-actions cms-content-controls south text-center">
Footer
</div>
</div>
I'm aware that majority of the tabs classes are added by jQuery UI however I'm yet to discover how these tabs are instantiated for me to trim off what isn't initially required.
I was hoping to simply access updateCMSFields() but method does not exist on LeftAndMain
Hoping for a pointer, thanks

Answer 1

Old question but I got stuck on this as well.
The tabs and the tabbed content need to be in the same "tabs" container. In the case of Silverstripe that container is .cms-tabset so moving that class up to the .cms-content div at the top accomplishes that. Here's the modified code from the question (trimmed some of the fat to make it more legible):
<!-- Add .cms-tabset class here -->
<div class="cms-content center cms-tabset $BaseCSSClasses" data-layout-type="border" data-pjax-fragment="Content" data-ignore-tab-state="true">
<!-- Start north -->
<div class="cms-content-header north">
<div class="cms-content-header-info">
<% include CMSBreadcrumbs %>
</div>
<div class="cms-content-header-tabs cms-tabset-nav-primary ss-ui-tabs-nav">
<ul class="cms-tabset-nav-primary">
<li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active">
<a href="#Root_Servers" class="ui-tabs-anchor" role="presentation" tabindex="-1">
Testing
</a>
</li>
<li class="ui-state-default ui-corner-top">
<a href="#Root_Settings" class="ui-tabs-anchor" role="presentation" tabindex="-1">
Settings
</a>
</li>
</ul>
</div>
<!-- End north -->
</div>
<!-- Start center -->
<div class="cms-content-fields cms-panel-padded center">
<div id="Root" class="field CompositeField tabset">
<div id="Root_Servers" class="tab ui-tabs-panel ui-widget-content ui-corner-bottom">
TAB 1 Content
</div>
<div id="Root_Settings" class="tab ui-tabs-panel ui-widget-content ui-corner-bottom">
TAB 2 Content
</div>
</div>
<!-- End center -->
</div>