jQueryでアコーディオン（クリック開閉メニュー)

jQueryでアコーディオン（クリック開閉メニュー)

slideToggle（）を使って実装するのがかんたん。
hover,clickをEventListenerにしてslideToggle（）を実行させる例がほとんど。

しかし、slideToggleの場合、css transitionのアニメーションが効かないので
ボタンを押してボタンのアニメーションをさせる場合にはアニメーション用のスクリプトを自作しないといけない。

<div class="faq_oya">
<h3>Q 質問<div class="aco_open">▲</div></h3>
                
                <div class="faq_Wrap">
                    <div class="faq_list">
                        <div><p>A</p></div>
                        <div><p>
                            回答
                            </p>
                        </div>
                    </div>
                </div>
</div>

CSS

.faq_oya h3{
    background: #eff8fc;
    color: #000000;
    font-weight: bold;
    margin: 20px 0;
    padding: 20px;
    position: relative;
}
.faq_list{
    display: flex;
    padding: 20px;
    

}
.faq_Wrap{
    display: none;
}
.faq_list > div:nth-child(1){
    width: 60px;

}
.aco_open{
    position: absolute;
    top: 30%;
    right: 2%;
    transform: rotate(180deg);
    cursor: pointer;
    z-index: 100;
}

JavaScript

$('.aco_open').click(function(){
    console.log($(this).next().slideToggle());
    $(this).parent().next().slideToggle();
    
})              
  

See the Pen
dypKoJR by miccyome (@miccyome)
on CodePen.