アコーディオンがすぐに閉じる現象について

Question

jQueryでアコーディオンをやりたいのですが、すぐにアコーディオンが閉じてしまう現象になります。
どのようにすれば良いか教えてもらいたいです。jQueryはProgateを参考にしました。

HTML

<div class="faq-item"> <p class="faq-question"> <span class="faq-icon-question">Q</span> クイックするとどうなりますか？ <img src="img/plus.svg"> </p> <div class="faq-answer"> <span class="faq-icon-answer">A</span> <p>アコーディオンが開きます。</p> </div> </div> <div class="faq-item"> <p class="faq-question"> <span class="faq-icon-question">Q</span> クイックするとどうなりますか？ <img src="img/plus.svg"> </p> <div class="faq-answer"> <span class="faq-icon-answer">A</span> <p>アコーディオンが開きます。</p> </div> </div> <div class="faq-item"> <p class="faq-question"> <span class="faq-icon-question">Q</span> クイックするとどうなりますか？ <img src="img/plus.svg"> </p> <div class="faq-answer"> <span class="faq-icon-answer">A</span> <p>アコーディオンが開きます。</p> </div> </div> <div class="faq-item"> <p class="faq-question"> <span class="faq-icon-question">Q</span> クイックするとどうなりますか？ <img src="img/plus.svg"> </p> <div class="faq-answer"> <span class="faq-icon-answer">A</span> <p>アコーディオンが開きます。</p> </div> </div>

jQuery
$('.faq-item').click( function() {
$answer = $(this).find('.faq-answer');
if ( $answer.hasClass('open') ) {
$answer.removeClass('open');
$answer.slideUp(300);
} else {
$answer.addClass('open');
$answer.slideDown(300);
}
});

Comments

[miyabi_pudding]

ソースコードはコードブロックを使って記載お願いします。
```ここに言語名
ここにソースコード
```
という形式です。

Answer 1

初期状態が開いているならopenクラスを付けてやらないと
整合性があいません（openクラスを使うかどうかは別の話）

Comments

[yambejp]

$(function(){
$('.faq-item .faq-answer').addClass('open');
$('.faq-item').on('click',function() {
$(this).find('.faq-answer').toggleClass('open').slideToggle(300);
});
});