Custom forms with tabs not working in 2.22

Hello,
I used the below script to create a custom form with tabs in version 2.21.
After upgrade to 2.22, the tabs no longer work. They are now rendered as an ordered list (see snapshot below) and when you click on the list it takes you out of the data entry form.
Is there something I need to do to the script to get back my tabs? Please advice.

Thanks,

Ese

 <script> jQuery(document).ready( function() { jQuery( '#tabs' ).tabs({ collapsible : true }); }); </script> <div id="tabs"> <ul> <li><a href="#tab-1">Tab names</a></li> <li><a href="#tab-2">Tab names</a></li> </ul> <div id="tab-1"><table>....</table></div> <div id="tab-2"><table>....</table></div>
<img alt="Inline image 2" src="/uploads/default/original/1X/9f3d13ae6bcbecfe8a7db7e42e022e93bb21fbd0.png" height="314" width="530">