JQuery UI Tabs problem

I have a page which has a list of tabs that show tab panels elsewhere in the same page. I would like some of the tabs to be nested. The nested tab items are only revealed when the parent item is clicked, therefore some listitems will be tabs and some will simply reveal the tabs nested in them. This is an example of my markup.

<div class="tabpanel></div>
<div class="tabpanel></div>
<div class="tabpanel></d开发者_如何学JAVAiv>

<ul id="tabs">
<li><a href="#tabs-1">Accordion</a></li>
<li><a href="">Tables</a>
<ul>
<li><a href="#tabs-2">Widgets</a></li>
<li><a href="#tabs-3">Tables</a>
</ul>
</li>
<li><a href="#tabs-4">Tooltips</a></li>
</ul>

I have initialized the tabs like so: $("#tabs").tabs('div.tabpanel'), which does seem to work for opening tab panels that sit elsewhere in the markup, however all parent list items are still tabs. e.g. 'tables' in the example above still fires a tab click. I would like to disable this as its not really a tab click, I just want to show the nested elements and they will trigger the opening of tab panels.

Use class="wrap". Follow this example: http://jquerytools.org/demos/tabs/multiple.html