アコーディオンを複数設置して個々に開閉したい

いつもお世話になっております。
jQueryを使って複数のアコーディオンを設置し、個々に開閉可能にしたいと考えています。

デフォルトでは全てが閉じている
クリックすると、クリックされたものだけ開く
開いているものは、もう一度クリックすると閉じる

以上のような状態を実現したく思いました。
調べたところ、

.next()

を使う事例が複数あったのですが、こちらですと兄弟関係が必要なようで、
html上は兄弟状態になっていないためうまく動きませんでした。
htmlのソースが離れている（兄弟では無い）状態で、
複数のアコーディオンを実装するにはどのようにすればよろしいでしょうか？
ご教授くださいませ。

html
1<!-- =====1個目 start===== -->
2<div class="content">
3    <div class="menu-block">
4        <ul>
5            <li><a href="#" class="confilm-table-btn">ここをクリックで開くようにしたい</a></li>
6        </ul>
7    </div>
8    
9    <!--以下をアコーディオンで表示-->
10    <div class="confilm-tables">
11        <table>
12            <tr>
13                <th>テーブル</th>
14                <td>テーブル</td>
15            </tr>
16        </table>
17        <table>
18            <tr>
19                <th>テーブル</th>
20                <td>テーブル</td>
21            </tr>
22        </table>
23    </div>
24</div>
25<!-- =====1個目 end===== -->
26
27<!-- =====2個目 start===== -->
28<div class="content">
29    <div class="menu-block">
30        <ul>
31            <li><a href="#" class="confilm-table-btn">ここをクリックで開くようにしたい</a></li>
32        </ul>
33    </div>
34    
35    <!--以下をアコーディオンで表示-->
36    <div class="confilm-tables">
37        <table>
38            <tr>
39                <th>テーブル</th>
40                <td>テーブル</td>
41            </tr>
42        </table>
43        <table>
44            <tr>
45                <th>テーブル</th>
46                <td>テーブル</td>
47            </tr>
48        </table>
49    </div>
50</div>
51<!-- =====2個目 end===== -->

js
1<script>
2$('.confilm-table-btn').click(function () {
3        if ($('.confilm-tables').css('display') == 'none') {
4          var index = $('.confilm-table-btn').index(this);//追加
5          $('.confilm-tables').eq(index).slideDown(500);//追加
6          $('.confilm-table-btn').addClass('confilm-table-btn-on');
7          $('.confilm-table-btn').removeClass('confilm-table-btn-off');
8        } else {
9          $('.confilm-tables').slideUp(500);
10          $('.confilm-table-btn').addClass('confilm-table-btn-off');
11        }
12      });
13</script>

何卒よろしくお願いいたします。

修正ソース01

js
1<script>
2      $('.confilm-table-btn').click(function () {
3        var index = $('.confilm-table-btn').index(this);
4        $('.confilm-tables').eq(index).slideToggle(500);
5        $('.confilm-table-btn').eq(index).toggleClass('confilm-table-btn-on');
6      });
7</script>

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

回答1件

ベストアンサー

提示されてるサンプルが複数無いのでよくわからないんですがこういうことですか？
https://jsfiddle.net/sousuke/9qbeqj1f/
とりあえず全消しして該当のものだけ出せばいいんじゃないですかね。

投稿2018/01/19 10:55

sousuke

総合スコア3828

junannko

2018/01/22 10:17

ご回答をありがとうございます！返信が大変遅くなり申し訳ございません。 > とりあえず全消しして該当のものだけ出せばいいんじゃないですかね。こんなにすっきりとしたソースで実現可能とは。。ご丁寧にご教授いただきおそれいります。ただ、私のソース表記と説明が分かりずらかったようで、上記htmlを修正し、補足させていただきます。 .confilm-table-btn .confilm-tables の2つは1組のコンテンツとなっており、同様のものが複数あって、各自閉じている状態から、クリックで開き、開いているものをクリックすると閉じる、という風にしたいのでございます。（開閉の挙動で言うと、http://liginc.co.jp/demo/toggle/demo1.html　この状態です。）そして、ご教授いただいたソースを参考に上記jsソースの状態に修正してみましたが、 1番目は開閉するのですが、2番目は開くのみで閉じませんでした。これを複数が各自開閉できるようにするにはどのようにすればよろしいのでしょう？？