jquery - ネストされたタブ - 2 番目のタブ領域のデフォルト状態 (jquery)

Question

2 番目のタブ領域を希望どおりに表示するのに少し苦労しています。

メイン タブをクリックしたときに、ネストされたタブのコンテンツがデフォルトで表示されません。

ネストされたタブがメインの既定のタブの一部である場合、それは見栄えが良いので、.click 関数に何かが欠けていると思いますが、それを理解することはできません。

私が探しているのは、タブ 2 をクリックすると、デフォルトでタブ 2-1 の内容が表示されることです。

これをうまく説明しているかどうかわからないので、JS Fiddle を次に示します: http://jsfiddle.net/ionko22/nTFH9/

ネストされたタブを適切に機能させる方法はありますか?

ここに私が現在持っているJSがあります

$(document).ready(function(){
        $('.tab-content').not('.default').hide();   
        $('.tabs li').click(function() {
        $(this).parent().parent().find('.tab-content').hide();
        var selected_tab = $(this).find('a').attr('href');  
        $(selected_tab).show();     
        $(this).parent().find('li').removeClass('current');
        $(this).addClass('current');
        return false;
    });
     });

そして私のHTML：

<div class="tabs">
    <ul>
        <li><a href="#tab1">tab 1</a></li>
        <li><a href="#tab2">tab 2</a></li>
        <li><a href="#tab3">tab 3</a></li>     
    </ul>
  <div id="tab1" class="tab-content default">
   Tab 1 Content
  </div>

  <div id="tab2" class="tab-content">
    <div class="tabs">
      <ul>
        <li><a href="#tab21">tab 2 1</a></li>
        <li><a href="#tab22">tab 2 2</a></li>
        <li><a href="#tab23">tab 2 3</a></li>     
      </ul>
    <div id="tab21" class="tab-content default">
        Tab 2 1 Content
    </div>
    <div id="tab22" class="tab-content">
        Tab 2 2 Content
    </div>
    <div id="tab23" class="tab-content">
        Tab 2 3 Content
     </div>
    </div>  
  </div>

  <div id="tab3" class="tab-content">
   Tab 3 Content
 </div>

 </div>