アコーディオンについて

ただいまアコーディオンの作成をしております。
その中で疑問が生まれたのですが、
以下のように親子関係なくアコーディオンの作成を進めているのですが、
親子関係は必ず必要になってくるものなのですか？

私は、<カテゴリー02(7)>をクリックしたら、
<カテゴリー02-a>、<カテゴリー02-b>、<カテゴリー02-c>、が出てくるように想定しています。

HTML
1<div class="main-right-categorys">
2          <h1>カテゴリー</h1>
3          <div class="main-right-categorys-content">
4            <div class="main-right-category">
5              <p>カテゴリー01 (6) </p>
6            </div>
7            <i class="fas fa-angle-right"></i>
8          </div>
9          <div class="main-right-categorys-content">
10            <div class="main-right-category">
11              <p>カテゴリー02 (7) </p>
12            </div>
13            <i class="fas fa-plus-circle"></i>
14          </div>
15          <div class="main-right-categorys-content main-right-categorys-list">
16            <div class="main-right-category">
17              <p>カテゴリー02-a (2) </p>
18            </div>
19            <i class="fas fa-angle-right"></i>
20          </div>
21          <div class="main-right-categorys-content main-right-categorys-list">
22            <div class="main-right-category">
23              <p>カテゴリー02-b (2) </p>
24            </div>
25            <i class="fas fa-angle-right"></i>
26          </div>
27          <div class="main-right-categorys-content main-right-categorys-list">
28            <div class="main-right-category">
29              <p>カテゴリー02-c (3) </p>
30            </div>
31            <i class="fas fa-angle-right"></i>
32          </div>
33          <div class="main-right-categorys-content">
34            <div class="main-right-category">
35              <p>ショートコード (4) </p>
36            </div>
37            <i class="fas fa-angle-right"></i>
38          </div>
39          <div class="main-right-categorys-content">
40            <div class="main-right-category">
41              <p>トピックス (6) </p>
42            </div>
43            <i class="fas fa-angle-right"></i>
44          </div>
45          <div class="main-right-categorys-content">
46            <div class="main-right-category">
47              <p>投稿サンプル (18) </p>
48            </div>
49            <i class="fas fa-angle-right"></i>
50          </div>
51        </div>

css
1.main-right-categorys-content {
2  justify-content: space-between;
3}
4
5.main-right-categorys-list {
6  display: none;
7}
8
9.main-right-categorys-list p {
10  margin: 0 10px;
11}
12
13.active {
14  display: block;
15}

jquery
1//アコーディオン//
2  $('.fa-angle-right').click(function(){
3    if ($('.main-right-categorys-list').hasClass('active')) {
4      $('.main-right-categorys-list').slideUp();
5      $('.main-right-categorys-list').removeClass('active');
6    } else {
7      $('.main-right-categorys-list').slideDown();
8      $('.main-right-categorys-list').addClass('active');
9    }
10  });

そもそも間違っているようでしたらすみません、、、
そこも踏まえて意見やアドバイスがあればよろしくお願いします。

追記：一応、codeの解決はしましたが、
アコーディオンの構造(理屈)的なものがわかるようでしたら、お願いします。

m.ts10806

2020/06/24 13:53

何を懸念されているのか分かりません。設計はどうなっていますか？

yambejp

2020/06/25 00:57

どこの何が連携してアコーディオンになっているのかさっぱりわかりませんまたアコーディオンの挙動についても説明が必要です

Lhankor_Mhy

2020/06/25 01:22

「ここをクリックしたらこうなると思って作ったけど、実際にはこうなった」のように、具体的に書いてください。

nekomannma

2020/06/25 11:17

皆様型コメントありがとうございます。今回の質問では、codeに関しては自分はこんな感じに今やっています程度な感じで、本質的にお聞きしたかったことは、アコーディオンは親子関係が関係なく作成することは可能なのかな？という疑問についてです。 ※サイトを見ている限りでは親子関係のものしか探せなかったので、、、、間際らしくさせて申し訳ありません。