jQuery: Is it possible to create tabs from a regular list?
<p>I am new to jQuery and JS and trying to figure out if it is possible to create simple tabs from a basic unordered list. I have the below dynamically generated HTML (I cannot change the list markup, but I can insert the button markup). </p>

<p>All the tabs tutorials I have read only discuss using unordered lists for buttons and divs for the tabs themselves. Is is possible to do it the opposite way using parent <code>li</code>s for the tabs and <code>div</code>s for the buttons?</p>

<pre><code>&lt;div&gt;tab 1&lt;/div&gt;
&lt;div&gt;tab 2&lt;/div&gt;
&lt;div&gt;tab 3&lt;/div&gt;

&lt;ul id="lists"&gt;
  &lt;li&gt;
    &lt;h2&gt;Title 1&lt;/h2&gt;
    &lt;ul&gt;
      &lt;li&gt;An item&lt;/li&gt;
      &lt;li&gt;An item&lt;/li&gt;
      &lt;li&gt;An item&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;h2&gt;Title 2&lt;/h2&gt;
    &lt;ul&gt;
      &lt;li&gt;An item&lt;/li&gt;
      &lt;li&gt;An item&lt;/li&gt;
      &lt;li&gt;An item&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;h2&gt;Title 3&lt;/h2&gt;
    &lt;ul&gt;
      &lt;li&gt;An item&lt;/li&gt;
      &lt;li&gt;An item&lt;/li&gt;
      &lt;li&gt;An item&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;
</code></pre>
