Able to put the content div anywhere

I often need to put the divs "content" elsewhere and not be forced to put them directly under the div "tabs".

Example

#!xml
<div id="tabs">
   <ul>
      <li>
         <a href="#tabs-1">Tab 1</a>
      </li>
      <li>
         <a href="#tabs-2">Tab 2</a>
      </li>
   </ul>
   <table>
      <tr>
         <td>something</td>
         <td>
            <div id="tabs-1">content 1</div>
            <div id="tabs-2">content 2</div>
         </td>
      </tr>
   </table>
</div>

I wrote a minimal solution until the ''jQuery UI Tabs'' allows this.

#!js
	var tabs = $("#tabs li");
	var panels = $("#tabs-1,#tabs-2,#tabs-3");

	$("#tabs li").bind('click', function() {
		var currentTab = $(this);

		if (!currentTab.hasClass("ui-tabs-selected"))
		{		
			var panelName = $(this).children("a").attr("href");
			var panel = $('#' + panelName);
			
			if (panel.hasClass("ui-tabs-hide"))
			{
				panels.addClass("ui-tabs-hide");
				panel.removeClass("ui-tabs-hide");
			}
			
			tabs.removeClass("ui-tabs-selected ui-state-active");		
			currentTab.addClass("ui-tabs-selected ui-state-active");
		}
	});
	
	$("#tabs li").bind('mouseover', function() {
		$(this).addClass("ui-state-hover");
	});
	$("#tabs li").bind('mouseout', function() {
		$(this).removeClass("ui-state-hover");
	});