jQuery - 탭 안의 탭?

Question

jQuery를 사용하여 탭 내부에 탭을 정렬하려고합니다. 아래는 내가 사용하고있는 HTML, CSS 및 JS입니다. #tab2 내에 몇 개의 탭을 삽입하려면 어떻게해야합니까?

HTML

<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"> 
    <div id="tab2-1">      <-- Tab 2-1 inside of #tab2 
    <p>test</p> 
    </div> 
    <div id="tab2-2">      <-- Tab 2-2 inside of #tab2 
    <p>test</p> 
    </div> 
</div> 

CSS

.tab_content { background:#fff;padding:10px;width:100% } 
.tabs li { display:inline;list-style:none } 
.tabs a { background:#7c7c7c;color:#dadada;display:inline-block } 
.tabs a.active { background:#e32d2d;color:#fff } 

JS

jQuery('ul.tabs').each(function(){ 
    // For each set of tabs, we want to keep track of 
    // which tab is active and it's associated content 
    var $active, $content, $links = jQuery(this).find('a'); 

    // If the location.hash matches one of the links, use that as the active tab. 
    // If no match is found, use the first link as the initial active tab. 
    $active = jQuery($links.filter('[href="'+location.hash+'"]')[0] || $links[0]); 
    $active.addClass('active'); 

    $content = $($active[0].hash); 

    // Hide the remaining content 
    $links.not($active).each(function() { 
     jQuery(this.hash).hide(); 
    }); 

    // Bind the click event handler 
    jQuery(this).on('click', 'a', function(e){ 
     // Make the old tab inactive. 
     $active.removeClass('active'); 
     $content.hide(); 

     // Update the variables with the new link and content 
     $active = jQuery(this); 
     $content = jQuery(this.hash); 

     // Make the tab active. 
     $active.addClass('active'); 
     $content.show(); 

     // Prevent the anchor's default click action 
     e.preventDefault(); 
    }); 
}); 

Answer 1

이 시도

<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