I need to update a legacy project which uses jquery UI 1.8 to the latest 1.13
I'm facing an issue in jQuery 1.9 the tabs widget had massive breaking changes, the current implementation (1.8) has all the tabs in a single panel and using the title attribute to tell each of these remote tabs the panel to use
According to the migration documentation title was replaced with area-controls
It doesn't seem to be a simple replacement as I'm not able to get the new tabs widget to use a single panel with remote href, area-controls doesn't seem to have any effect
An example of how this might be achieved would be great, otherwise, I'll have to rewrite all the legacy code to deal with different panels for each tab (I tried :| it will take forever)
I was trying to update the URL manually during the activation event, but I think I found how the new way meant to work. Simply the new element aria-controls needs to be added to the li not to the link a (at least this is where the legacy code I have has the title added to)
<div id="tabs">
<ul>
<li aria-controls="panel"><a href="link1.html"><span>Link 1</span></a></li>
<li aria-controls="panel"><a href="https://jsfiddle.net/about"><span>Link 2</span></a></li>
<li aria-controls="panel"><a href="https://jsfiddle.net"><span>Link 3</span></a></li>
<li aria-controls="panel"><a href="link4.html"><span>Link 4</span></a></li>
</ul>
<div id="panel" >Content should be loaded here.</div>
</div>
I found this here