JqueryUI. Кнопки таба и контент в разных блоках в Tab Widget.
 

Может кто сталкивался:) ? Пишу простой редактор с возможностью использования табов для смены документа и создания нового документа. На официальном сайте код кнопки таба и контент помещается в одном теге с ID id="tabs":

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Кнопка таба 1</a> <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span></li>
    <li><a href="#tabs-2">Кнопка таба 2</a> <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span></li>
  </ul>
  <div id="tabs-1">
    <p>Контент таба 1</p>
  </div>
 <div id="tabs-2">
    <p>Контент таба 2</p>
  </div>
</div>

Мне нужно, чтобы он активировал тот таб, который соответствует его кнопке, но вместо этого выводит ошибку:

Error: jQuery UI Tabs: Mismatching fragment identifier.

А у меня в проекте и кнопки и контент находятся в разных местах и соответственно ID будет у каждого будет разный. Ломаю голову, не получается, все затруднено еще тем, что jQueryUI добавляет собственные классы и стили в процессе работы виджета и какой куда добавляет сразу не могу понять:(

WebSofter,
так может без jQueryUI сделать?