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

Question

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

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

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

.next()

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

<!-- =====1個目 start===== -->
<div class="content">
    <div class="menu-block">
        <ul>
            <li><a href="#" class="confilm-table-btn">ここをクリックで開くようにしたい</a></li>
        </ul>
    </div>
    
    <!--以下をアコーディオンで表示-->
    <div class="confilm-tables">
        <table>
            <tr>
                <th>テーブル</th>
                <td>テーブル</td>
            </tr>
        </table>
        <table>
            <tr>
                <th>テーブル</th>
                <td>テーブル</td>
            </tr>
        </table>
    </div>
</div>
<!-- =====1個目 end===== -->

<!-- =====2個目 start===== -->
<div class="content">
    <div class="menu-block">
        <ul>
            <li><a href="#" class="confilm-table-btn">ここをクリックで開くようにしたい</a></li>
        </ul>
    </div>
    
    <!--以下をアコーディオンで表示-->
    <div class="confilm-tables">
        <table>
            <tr>
                <th>テーブル</th>
                <td>テーブル</td>
            </tr>
        </table>
        <table>
            <tr>
                <th>テーブル</th>
                <td>テーブル</td>
            </tr>
        </table>
    </div>
</div>
<!-- =====2個目 end===== -->

<script>
$('.confilm-table-btn').click(function () {
        if ($('.confilm-tables').css('display') == 'none') {
          var index = $('.confilm-table-btn').index(this);//追加
          $('.confilm-tables').eq(index).slideDown(500);//追加
          $('.confilm-table-btn').addClass('confilm-table-btn-on');
          $('.confilm-table-btn').removeClass('confilm-table-btn-off');
        } else {
          $('.confilm-tables').slideUp(500);
          $('.confilm-table-btn').addClass('confilm-table-btn-off');
        }
      });
</script>

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

修正ソース01

<script>
      $('.confilm-table-btn').click(function () {
        var index = $('.confilm-table-btn').index(this);
        $('.confilm-tables').eq(index).slideToggle(500);
        $('.confilm-table-btn').eq(index).toggleClass('confilm-table-btn-on');
      });
</script>

Answer 1

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

Comments

[junannko]

ご回答をありがとうございます！
返信が大変遅くなり申し訳ございません。

> とりあえず全消しして該当のものだけ出せばいいんじゃないですかね。
こんなにすっきりとしたソースで実現可能とは。。
ご丁寧にご教授いただきおそれいります。
ただ、私のソース表記と説明が分かりずらかったようで、上記htmlを修正し、補足させていただきます。

.confilm-table-btn
.confilm-tables

の2つは1組のコンテンツとなっており、
同様のものが複数あって、各自閉じている状態から、
クリックで開き、開いているものをクリックすると閉じる、という風にしたいのでございます。
（開閉の挙動で言うと、http://liginc.co.jp/demo/toggle/demo1.html　この状態です。）

そして、ご教授いただいたソースを参考に上記jsソースの状態に修正してみましたが、
1番目は開閉するのですが、2番目は開くのみで閉じませんでした。
これを複数が各自開閉できるようにするにはどのようにすればよろしいのでしょう？？

[sousuke]

複数独立していいということですか？それならばslideToggleだけでいいと思います。
https://jsfiddle.net/sousuke/bwaoc47b/1/

[junannko]

> 複数独立していいということですか？
左様でございます。

おお。
すごい！実現できました！
さらに、矢印を回転させたかったので toggleClass を使ってcssを追加いたしました。（修正ソース01）
ご丁寧な回答に感謝いたします！
今後も勉強してまいります。
ありがとうございます！

[sousuke]

解決できて何よりですｂ

[junannko]

ありがとうございます！(^_^);