クリック時のタブ内容の表示と非表示

Question

こんにちは私は現在次の設定があります - https://jsfiddle.net/scwbqffo/ いずれかのタブをクリックするとコンテンツが表示され、タブ間を切り替えることができます（フィドルでは機能しません。

可能であれば、タブをもう一度クリックして閉じることができますか？

$(document).ready(function(){ 
    $("ul#tabs li").click(function(e){ 
     if (!$(this).hasClass("active")) { 
      var tabNum = $(this).index(); 
      var nthChild = tabNum+1; 
      $("ul#tabs li.active").removeClass("active"); 
      $(this).addClass("active"); 
      $("ul#tab li.active").removeClass("active"); 
      $("ul#tab li:nth-child("+nthChild+")").addClass("active"); 
     } 
    }); 
}); 

<ul id="tabs"> 
    <li>Show tab 1</li> 
    <li>Show tab 2</li> 

</ul> 
<ul id="tab"> 
    <li>showing tab 1 content</li> 
    <li>showing tab 2 content</li> 
</ul> 

ul#tabs { 
    list-style-type: none; 
    padding: 0; 
    text-align: center; 
} 
ul#tabs li { 
    display: inline-block; 
    background-color: #252525; 
    border-bottom: solid 2px grey; 
    padding: 10px 20px; 
    margin-bottom: 4px; 
    color: #fff; 
    cursor: pointer; 
} 
ul#tabs li:hover { 
    background-color: grey; 
} 
ul#tabs li.active { 
    background-color: #00aeef; 
} 
ul#tab { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 
ul#tab li { 
    display: none; 
} 
ul#tab li.active { 
    display: block; 
} 

Answer 1

を使用する必要があなたの質問に答えるために、jsFiddleでのjQueryを欠けている

else { 
    $(this).removeClass('active'); 
    $("ul#tab li.active").removeClass("active"); 
} 

jsfiddle

Answer 2

あなたはちょうどactiveクラスを削除し、あなたのjqueryのでelseを追加toggleClass