title: Create tabs with 2 rows of tabs, 1 content box, javascript/jQuery
body: <p>I am wondering if anyone has a solution for what seems like an easy problem.</p>
  
  <p>I am trying to create a tab box that has a row of tabs that run across the top of the content box and another row that runs along the bottom of the content box. </p>
  
  <p>Something like this:</p>
  
  <pre><code>  &lt;div id="tabContainer"&gt;
      &lt;div id="tabs"&gt;
        &lt;ul&gt;
          &lt;li id="tabHeader_1"&gt;Tab 1&lt;/li&gt;
          &lt;li id="tabHeader_2"&gt;Tab 2&lt;/li&gt;
          &lt;li id="tabHeader_3"&gt;Tab 3&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div id="tabscontent"&gt;
        &lt;div class="tabpage" id="tabpage_1"&gt;
          &lt;h2&gt;Page 1&lt;/h2&gt;
          &lt;p&gt;Content 1&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="tabpage" id="tabpage_2"&gt;
          &lt;h2&gt;Page 2&lt;/h2&gt;
          &lt;p&gt;Content 2&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="tabpage" id="tabpage_3"&gt;
          &lt;h2&gt;Page 3&lt;/h2&gt;
          &lt;p&gt;Content 3&lt;/p&gt;
        &lt;/div&gt;
                &lt;div class="tabpage" id="tabpage_4"&gt;
          &lt;h2&gt;Page 4&lt;/h2&gt;
          &lt;p&gt;Content 4&lt;/p&gt;
        &lt;/div&gt;
                &lt;div class="tabpage" id="tabpage_5"&gt;
          &lt;h2&gt;Page 5&lt;/h2&gt;
          &lt;p&gt;Content 5&lt;/p&gt;
        &lt;/div&gt;
                &lt;div class="tabpage" id="tabpage_6"&gt;
          &lt;h2&gt;Page 6&lt;/h2&gt;
          &lt;p&gt;Content 6&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
            &lt;div id="tabs"&gt;
        &lt;ul&gt;
          &lt;li id="tabHeader_4"&gt;Tab 4&lt;/li&gt;
          &lt;li id="tabHeader_5"&gt;Tab 5&lt;/li&gt;
          &lt;li id="tabHeader_6"&gt;Tab 6&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Muchos thank yous to anyone who can help!</p>