js 開いたアコーディオンを閉じたい

Question

表題の通りで、現在クリックすると開いたままのアコーディオンをクリックすると再度閉じたい

ここに実現したいことを箇条書きで書いてください。
-クリックすると開いたままのアコーディオンをクリックすると再度閉じたい

アコーディオンは開く状態である

ここに質問の内容を詳しく書いてください。
Q&Aの質問と回答のページを作っています。
どうぞよろしくお願いします。

発生している問題・エラーメッセージ

再度クリックすると閉じるべきアコーディオンが閉じない

該当のソースコード

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button class="accordion"><p>
質問文
</p></button>
<div class="panel"><p>
回答分<br>
回答分<br>
回答分<br>
回答分<br>
回答分
</p></div>

.accordion {
    background-color: #FBF9F7;
    cursor: pointer;
    padding: 10px 20px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    transition: 0.4s;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px
}

.accordion p {
    flex: 1;
    font-weight: 700
}

.accordion:before {
    content: "Q.";
    display: block;
    font-size: 28px;
    color: #00125E;
    font-family: "Oswald", sans-serif
}

.accordion:after {
    content: "筐�";
    display: block;
    margin-left: auto;
    transition: 0.2s
}

.accordion.active:after {
    content: "筐�";
    transform: rotate(-180deg);
    top: 25%
}

.accordion:hover {
    background-color: #ccc
}

.accordion+.panel {
    padding: 0 20px;
    background-color: #FBF9F7;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 10px
}

.accordion+.panel:before {
    content: "A.";
    display: block;
    font-size: 28px;
    color: #DF0515;
    padding-top: 15px;
    font-family: "Oswald", sans-serif
}

.accordion+.panel p {
    flex: 1;
    padding: 20px 0
}

$('.accordion').on('click', function () {
    var findElm = $(this).next(".panel");
    	$(findElm).slideToggle(function () {



        $(findElm).slideDown(500);
        $(findElm)[0].style.maxHeight ="500px";
        $(findElm)[0].style.display = "block";
    });
});

試したこと

$(findElm).slideToggle(function () {

の次の行.close を付与するjsをいろいろ記載してみたのですが
うまくいきません。

cssは
.panel.close{
display:none;
height:0;
}
としました。

補足情報（FW/ツールのバージョンなど）

html css javascript

Answer 1

$(findElm).slideDown(500);
$(findElm)[0].style.display = "block";

上記のjs(7行目と９行目)を削除したら閉じました。

Comments

[doyuma]

解決できて良かったです。

[ema-material]

追加で質問させてください。
二回クリックしないと開いたり閉じたりしないという指摘がありまして修正しています。
なぜ二回目のみのクリックが反映されるのでしょうか？

[doyuma]

個人的な見解ですが、jsにて「slideToggle」と「slideDown」の両方が記載されており、この２つを一緒に使うことで上記の不具合が発生している可能性があります。どちらか１つにする方が良いかと思われます。

参考に私が考えたコード修正案を記載します。こちらで１回のクリックで開閉できると思います。

【html】
<div class="panel">
　　↓
<div class="panel none">に変更

【CSS】　下記２文を削除
・max-height: 0;
・transition: max-height 0.2s ease-out;

下記文を.accordion+.panel{～}の次に追加
.accordion+.none {
display: none;
}

【JS】　下記３文削除
・$(findElm).slideDown(500);
・$(findElm)[0].style.maxHeight ="500px";
・$(findElm)[0].style.display = "block";

Answer 2

その後自己解決しましたのでお知らせします。