title: How to Initialize Tabbed Content outside Tabbed Container in jQuery UI tabs?
body: <p>Is it possible and if so, how would you initialize tabbed content outside of the tabs container element?</p>
  
  <p>The documentation all includes the tabs and the tab content in the same container, example:</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="tabs"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#tab1"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#tab2"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#tab3"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div id="tab1"&gt;
          Tab 1 content
      &lt;/div&gt;
      &lt;div id="tab2"&gt;
          Tab 2 content
      &lt;/div&gt;
      &lt;div id="tab3"&gt;
          Tab 3 content
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, for the project I'm working on, the navigation and the tab content are not located within the same container, thus:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;nav id="tabs"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#tab1"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#tab2"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#tab3"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  ...
  &lt;article&gt;
      &lt;section id="tab1"&gt;
          Section 1 content
      &lt;/section&gt;
      &lt;section id="tab2"&gt;
          Section 2 content
      &lt;/section&gt;
      &lt;section id="tab3"&gt;
          Section 3 content
      &lt;/section&gt;
  &lt;/article&gt;
  </code></pre>