jQuery - Tabs inside of tabs?

Question

I\'m trying to arrange tabs inside of tabs using jQuery. Below is the HTML, CSS, and JS that I\'m using. How can I insert a couple tabs within #tab2?

HT

Answer 1

Try this,

<ul class="tabs">
    <li><a href="#tab1">Podcasts</a></li>
    <li><a href="#tab2">Videos</a></li>
</ul>
<div id="tab1" class="tab_content">
    <p>test</p>
</div>
<div id="tab2" class="tab_content">
    <ul class="tabs">   <!-- Add tabs here -->
        <li><a href="#tab2-1">Tab2-1</a></li>
        <li><a href="#tab2-2">Tab2-2</a></li>
    </ul>
    <div id="tab2-1">
        <p>test 1</p>
    </div>
    <div id="tab2-2">
        <p>test 2</p>
    </div>
</div>

Live Demo