jqueryを使って1つを開くと他が閉じるアコーディオンメニューを作りたい

該当のソースコード

<div class="contents12">
            <div class="background-thinpink">
                <div class="btn">
                    <img src="./img/flight.png" />
                    <h3 class="text-left">事前課題の提出</h3>
                </div>
                <div class="hidden"><!--隠す場所-->
                    <p>出発前の１ヶ月前に事前課題を送ります。</p>
                </div>
            </div>
            <div class="background-thinpink">
                <div class="btn">
                    <img src="./img/flight.png" />
                    <h3 class="text-left">現地に渡航</h3>
                </div>
                <div class="hidden">
                    <p>
                        到着日には空港でお出迎えし、初日のオリエンテーションを行います。滞在先は空港からすぐの出来たてシェアハウス。
                        美味しいタイ料理などもご紹介します。
                    </p>
                </div>
            </div>
</div>

jQuery
1
2$(function () {
3    $('.hidden').hide();
4    $(".btn").click(function () {
5        $(this).next('.hidden').slideToggle('slow');
6        $(this).toggleClass('active');
7    })
8
9
10})
11

css
1.btn::after{
2    content:'▼';
3    float:right;
4    font-size:20px;
5    margin-top:8px;
6}
7
8.active::after {
9    content: '▲';
10    float: right;
11    font-size: 20px;
12    margin-top: 8px;
13}
14
15

自分なりに調べてみたのですがどうしても実装できなかったです。
調べたサイトではsiblingsを使ったりしていたのですがHTMLの構造上それも使えないように思えました。
1つずつ開くことはできるのですが、「1つひらくと他が閉じる」、が実装できません。
初歩的な質問ですがご教授いただけるとありがたいです。

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

回答1件

ベストアンサー

javascript
1<style>
2.btn:not(.active)::after{
3    content:'▼';
4    float:right;
5    font-size:20px;
6    margin-top:8px;
7}
8
9.btn.active::after {
10    content: '▲';
11    float: right;
12    font-size: 20px;
13    margin-top: 8px;
14}
15</style>
16<script>
17$(function(){
18  $('.btn').on('click',function(){
19    $(this).toggleClass('active').next('.content').slideToggle();
20    $('.btn').not(this).removeClass('active').next('.content').slideUp();
21  });
22});
23</script>
24
25<div class="contents12">
26  <div class="background-thinpink">
27    <div class="btn">
28      <img src="./img/flight.png" />
29      <h3 class="text-left">事前課題の提出</h3>
30    </div>
31    <div class="content" style="display:none"><!--隠す場所-->
32      出発前の１ヶ月前に事前課題を送ります。
33    </div>
34  </div>
35  <div class="background-thinpink">
36    <div class="btn">
37      <img src="./img/flight.png" />
38      <h3 class="text-left">現地に渡航</h3>
39    </div>
40    <div class="content" style="display:none">
41      到着日には空港でお出迎えし、初日のオリエンテーションを行います。滞在先は空港からすぐの出来たてシェアハウス。
42      美味しいタイ料理などもご紹介します。
43    </div>
44  </div>
45  <div class="background-thinpink">
46    <div class="btn">
47      <img src="./img/flight.png" />
48      <h3 class="text-left">test</h3>
49    </div>
50    <div class="content" style="display:none">
51      testtesttesttesttesttesttesttesttesttesttesttest
52      testtesttesttesttesttesttesttesttesttesttesttest
53      testtesttesttesttesttesttesttesttesttesttesttest
54    </div>
55  </div>
56  <div class="background-thinpink">
57    <div class="btn">
58      <img src="./img/flight.png" />
59      <h3 class="text-left">test</h3>
60    </div>
61    <div class="content" style="display:none">
62      testtesttesttesttesttesttesttesttesttesttesttest
63      testtesttesttesttesttesttesttesttesttesttesttest
64      testtesttesttesttesttesttesttesttesttesttesttest
65    </div>
66  </div>
67</div>
68