tabs UI доп. список

[Suharik]

Запутался в табах.
Вот обычный JQ таб

$('#tabs').tabs();

<div id="tabs">
     <ul>
         <li><a href="#tabs1"> 1</a> </li>
         <li> <a href="#tabs2"> 2</a> </li> 
       </ul>

<div id=tabs1> Первая вкладка </div>
<div id=tabs2> Первая вкладка </div>

Так работает, а если вот так хочу, то ломается все((

<div id="tabs">
     <ul>
         <li><a href="#tabs1"> 1</a> </li>
         <li> <a href="#tabs2"> 2</a> </li> 
       </ul>

<div id=tabs1> Первая вкладка 
      <ul>
         <li>33 </li>
         <li>44 </li> 
       </ul>

</div>
<div id=tabs2> Первая вкладка </div>

[monolithed]

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
#tabs {margin: 0px auto;overflow: hidden;width: 204px;}
#tabs div {border-left: 1px solid #DDD;overflow: hidden;width: 205px;height: 22px;}
div a {display: block;float: left;width: 48px;border: 1px solid #DDD;border-left: none;text-align: center;text-decoration: none;}
div a:hover {background: #FBFBFB;}
ul {display: block;margin: 0px;padding: 0px;width: auto;height: auto;}
li {border: 1px solid #DDD;border-top: none;display: none;float: left;list-style-type: none;width: 195px;height: 50px;}
.display, .first {background: #EBFAFE;display: block;}
</style>

<script type="text/javascript">
$(function(){
	$('div a').each(function(i){
		$(this).click(function(){
			$(this).toggleClass('display').siblings().removeClass('display first');
			$('ul').each(function(){
				$(this).find('li:eq('+i+')').toggleClass('display').siblings().removeClass('display first');
			});
		});
	});
});
</script>
<div id="tabs">
	<div>
		<a class="first" href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a>
	</div>
	<ul>
		<li class="first">#text_tab_1</li><li>#text_tab_2</li><li>#text_tab_3</li><li>#text_tab_4</li>
	</ul>
</div>

[Suharik]

извращенец)) Но я не то хотел.