再度クリックした時にクラスを削除したい

Question

お世話になります。
クリックした要素と同じIDのセクションを開閉したいのですが、その際クリックした要素にクラスを追加したいと思っています。

要素をクリックして再度クリックした時にクラス削除したいのですが、うまくいきません。
ご教授お願いいたします。

$(function(){
  $('.section').hide();
	$('.btn').on('click',function(){
        
	$('.section').not($('.'+$(this).attr('id'))).slideUp();
	$('.section').not($('.'+$(this).attr('id'))).css('display','none');
	$('.active').not().removeClass("active");

	$('.'+$(this).attr('id')).slideToggle();
	$(this).toggleClass("active");

	$('.close').click(function () {
	$('.section').not($('.'+$(this).attr('id'))).slideUp();
	$('.btn').removeClass("active");
	});
  });
});

<ul class="category">
     <li>
          <div class="list_wrap"><div id="fuu" class="btn">カテゴリ1</div></div>
     </li>
     <li>
          <div class="list_wrap"><div id="euu" class="btn">カテゴリ2</div></div>
     </li>
     <li>
          <div class="list_wrap"><div id="guu" class="btn">カテゴリ3</div></div>
     </li>
</ul>

<div class="fuu section">
     <div class="category_inner">
          <ul class="item_list"><li>カテゴリ1</li><li>カテゴリ1</li>
     </ul>
     <p class="close">閉じる</p>
     </div>
</div>

<div class="euu section">
     <div class="category_inner">
          <ul class="item_list"><li>カテゴリ2</li><li>カテゴリ2</li>
     </ul>
     <p class="close">閉じる</p>
     </div>
</div>

<div class="guu section">
     <div class="category_inner">
          <ul class="item_list"><li>カテゴリ3</li><li>カテゴリ3</li>
     </ul>
     <p class="close">閉じる</p>
     </div>
</div>

Answer 1

.not()の中に$(this)を入れてみました。
入れないと全部の.activeからactiveが外れ、
その後の処理でtoggleClassでactiveが必ずついちゃうので。
※ちょっとややこしい…

//$('.active').not().removeClass("active");
$('.active').not($(this)).removeClass("active");

Comments

[haruhi1221]

うまくいきました！ありがとうございます！