アコーディオンメニューで、一つ開くと全部開いてしまうのを何とかしたい。

アコーディオンメニューを実装したいです。クリックで開くタイプのメニューです。
しかし、ひとつ開くとほかのところも同時に開いてしまうのをなんとかしたいです。

html css jsのコードはこんな感じです。

html↓

<div class="section s_08">

        <div class="accordion_area">
      
          <div class="accordion_one _flex">
            <div class="accordion_header">Category</div>
            <div class="accordion_inner">
              <div class="accordion_one">
                <div class="accordion_header_one">カテゴリが入ります</div>
                <div class="accordion_header_one">カテゴリが入ります</div>
                <div class="accordion_header_one">カテゴリが入ります</div>
                <div class="accordion_header_one">カテゴリが入ります</div>
              </div>
            </div>
          </div>
      
          <div class="accordion_one _flex">
            <div class="accordion_header">Keyword</div>
            <div class="accordion_inner">
              <div class="accordion_one">
                <div class="accordion_header_one">カテゴリが入ります</div>
                <div class="accordion_header_one">カテゴリが入ります</div>
                <div class="accordion_header_one">カテゴリが入ります</div>
                <div class="accordion_header_one">カテゴリが入ります</div>
              </div>
            </div>
          </div>
      
          <div class="accordion_one _flex">
            <div class="accordion_header">Year</div>
            <div class="accordion_inner">
              <div class="accordion_one">
                <div class="accordion_header_one">カテゴリが入ります</div>
                <div class="accordion_header_one">カテゴリが入ります</div>
                <div class="accordion_header_one">カテゴリが入ります</div>
                <div class="accordion_header_one">カテゴリが入ります</div>
              </div>
            </div>
          </div>
      
        </div>
      
      </div>
コード

css↓

.accordion_area{
    width:655px;
    margin:0 auto;
    display:-webkit-box;
  	display:-ms-flexbox;
    display:flex;
    -webkit-box-pack: justify;
	-ms-flex-pack: justify;
    justify-content: space-between;
    margin-top:100px;
}
.accordion_area .accordion_one._flex{
    width:210px;
    /* display:inline-block; */
    border:1px solid #00B8B6;
    border-radius:23px;
    font-family : GothamRounded Medium;
    font-size : 16px;
    line-height : 30px;
    letter-spacing : 4.48px;
    color : #00B8B6;
    padding:15px 0 15px 15px;
    text-align: left;
}
.accordion_area .accordion_header{
    position:relative;
}
.accordion_area .accordion_header::after{
    content:"";
    width:10px;
    height:10px;
    border-bottom:1px solid #00B8B6;
    border-right:1px solid #00B8B6;
    position:absolute;
    top:50%;
    right:30px;
    transform: rotate(45deg)translateY(-150%);
}
.s_08 .accordion_one .accordion_inner{
    display: none;
    padding: 0;
    box-sizing: border-box;
}
コード

js↓

// .s_08 .accordion_one
$(function(){
    //.accordion_oneの中の.accordion_headerがクリックされたら
    $('.s_08 .accordion_one .accordion_header').click(function(){
      //クリックされた.accordion_oneの中の.accordion_headerに隣接する.accordion_innerが開いたり閉じたりする。
      $(this).next('.accordion_inner').slideToggle();
      $(this).toggleClass("open");
      //クリックされた.accordion_oneの中の.accordion_header以外の.accordion_oneの中の.accordion_headerに隣接する.accordion_oneの中の.accordion_innerを閉じる
      $('.s_08 .accordion_one .accordion_header').not($(this)).next('.accordion_one .accordion_inner').slideUp();
      $('.s_08 .accordion_one .accordion_header').not($(this)).removeClass("open");
    });
  });

コード

これをクリックするとクリックした部分だけ下に開くようにしたいです。

どなたかわかる方いらっしゃいましたら、教えてください。よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

ちょっと惜しい事になっていたよ

javascript
1$(function(){
2    //.accordion_oneの中の.accordion_headerがクリックされたら
3    $('.s_08 .accordion_one .accordion_header').click(function(){
4		var isOpen = $(this).hasClass('open');								// クリックされたタグにすでに'open'が設定されているか
5      	$('.accordion_one > .open + .accordion_inner').slideToggle();		// 閉じる
6		$('.s_08 .accordion_one .accordion_header').removeClass("open");	// "open"全部削除
7		if(isOpen == false){
8			$(this).addClass("open");										// 自分は"open"を設定
9	      	$('.accordion_one > .open + .accordion_inner').slideToggle();	// 開く用
10		}
11    });
12});
13

1箇所だけ追加

CSS
1.accordion_area{
2    width:655px;
3    margin:0 auto;
4    display:-webkit-box;
5    display:-ms-flexbox;
6    display:flex;
7    -webkit-box-pack: justify;
8    -ms-flex-pack: justify;
9    justify-content: space-between;
10    margin-top:100px;
11}
12.accordion_area .accordion_one._flex{
13    width:210px;
14    /* display:inline-block; */
15    display: inline-table; /* ※ 追加*/
16    border:1px solid #00B8B6;
17    border-radius:23px;
18    font-family : GothamRounded Medium;
19    font-size : 16px;
20    line-height : 30px;
21    letter-spacing : 4.48px;
22    color : #00B8B6;
23    padding:15px 0 15px 15px;
24    text-align: left;
25}
26.accordion_area .accordion_header{
27    position:relative;
28}
29.accordion_area .accordion_header::after{
30    content:"";
31    width:10px;
32    height:10px;
33    border-bottom:1px solid #00B8B6;
34    border-right:1px solid #00B8B6;
35    position:absolute;
36    top:50%;
37    right:30px;
38    transform: rotate(45deg)translateY(-150%);
39}
40.s_08 .accordion_one .accordion_inner{
41    display: none;
42    padding: 0;
43    box-sizing: border-box;
44}