jquery define tabs with content
<p>I like to use JQuery for creating tabs.  My issue is all jquery tab definitions follow this design.</p>

<pre><code>&lt;div&gt;  
&lt;h4&gt;Heading&lt;/h4&gt;  
  &lt;div&gt;  
    &lt;ul&gt;  
     &lt;li&gt;&lt;a&gt;Tab 1&lt;/a&gt;&lt;/li&gt;  
     &lt;li&gt;&lt;a&gt;Tab 2&lt;/a&gt;&lt;/li&gt;  
     &lt;li&gt;&lt;a&gt;Tab 3&lt;/a&gt;&lt;/li&gt;  
    &lt;/ul&gt;  
     &lt;div&gt;Content for Tab 1&lt;/div&gt;  
     &lt;div&gt;Content for Tab 2&lt;/div&gt;  
     &lt;div&gt;Content for Tab 3&lt;/div&gt;  
  &lt;/div&gt;  
&lt;/div&gt;  
</code></pre>

<p>However, I need a design like this:</p>

<pre><code>&lt;div&gt;  
  &lt;h4&gt;Heading&lt;/h4&gt;  
  &lt;div&gt;  

    &lt;div&gt;&lt;a&gt;Tab 1&lt;/a&gt;&lt;/div&gt;
    &lt;div&gt;Content for Tab 1&lt;/div&gt;  

    &lt;div&gt;&lt;a&gt;Tab 2&lt;/a&gt;&lt;/div&gt;  
    &lt;div&gt;Content for Tab 2&lt;/div&gt;  

    &lt;div&gt;&lt;a&gt;Tab 3&lt;/a&gt;&lt;/div&gt;  
    &lt;div&gt;Content for Tab 3&lt;/div&gt;  

  &lt;/div&gt;  
&lt;/div&gt;  
</code></pre>

<p>Is the above design possible?  </p>

<p>Also, I need the tabs to be recognised by css class and not ids (since I create tabs dynamically through code).  Is this possible too?</p>

<p><strong>Update:</strong> Thanks for all the great minds who helped me, I'm able to establish what I wanted.  I have used the inputs from the below posts and improved them for placing multiple tabs in a page. </p>

<p><strong>Find the demo here:</strong> 
<a href="http://jsfiddle.net/sunalive/VHPwP/12/" rel="nofollow">http://jsfiddle.net/sunalive/VHPwP/12/</a></p>
