jqueryで開閉したい

Question

###前提・実現したいこと
現在アコーディオンメニューを作っており
・liをクリックでdiv内を表示
・他のliをクリックで元のdiv内を非表示にし、該当のdivを表示
・同じliを２回クリックしたらcontent部分を非表示
という動作をしたいのですが、最後の非表示にする事ができません。

###該当のソースコード

<nav>
<ul class="global_nav">
<li class="gn01">1</li>
<li class="gn02">2</li>
<li class="gn03">3</li>
</ul>
</nav>
<div class="content">
<div class="area gn01">
<div class="gn_box">１の内容</div>
</div>
<div class="area gn02">
<div class="gn_box">２の内容</div>
</div>
<div class="area gn03">
<div class="gn_box">３の内容</div>
</div>
</div>



<script>
$(function(){
$('.global_nav > li').click(function(){
$('.global_nav > li,.area').removeClass('active');
var tabClass = $(this).attr('class');
$(this).addClass('active');
$('.area').each(function(){
if($(this).attr('class').indexOf(tabClass) != -1){
$(this).addClass('active').fadeIn();
}else{
$(this).hide();
}
});
});
});
</script> 

###試したこと
jquery自体をあまりまだ把握していないので、どの部分にどのように追記すればいいかが
わかりません。

宜しくお願い致します。

Comments

[kei344]

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

解決いたしました。
ありがとうございました。

Comments

[kei344]

どのように解決したかコードを回答欄に追記いただけませんか？このページに辿り着いた同じ疑問を持つ人のために、ぜひお願いします。

Answer 2

    var div = $('.area.' + this.className);
    if (div.is(':visible')) {
      div.hide();
    } else {
      $('.area').hide();
      div.fadeIn();
    }

Comments

[dona0513]

ご回答誠に感謝いたします。
こちらのソースをどこに追記すればよろしいでしょうか。

申し訳御座いませんが宜しくお願い致します。