jQueryを使用したアコーディオン

Question

FAQのコンテンツで、開閉マークのついたアコーディオンを制作中です。
解決できないことが2点あり、教えていただけると助かります。

①開閉マークが全体に効いてしまっている
②1つをクリックした後、もう1つクリックすると、"－"になってしまう

【html】

<dl> <dt class="active"><span class="faqQ">Q</span>質問？</dt> <dd>回答</dd> </dl> <dl> <dt class="active"><span class="faqQ">Q</span>質問？</dt> <dd>回答</dd> </dl>

---

【js】

$(function(){
$('#faq dt').click(function(){
$(this).next().slideToggle(300);
$('#faq dt').not(this).next().slideUp(300);
});
});
$(function() {
$('#faq dt').click(function() {
$('span').toggleClass('active');
});
});

---

コードは上記になります。
他サイトからのコピペしてきています。
jsは不慣れなため、色々試しても解決できないでいます。
よろしくお願いします。

Answer 1

勉強中の未熟者ですが質問にトライさせていただきました。

#faq dd {
display: none;
}

cssに上記を付け足して初期表示の回答を隠す

$(function(){
$('#faq dt').click(function(){

$(this).next().slideToggle(300);//クリック対象の回答部分表示トグル
$(this).children('span').toggleClass('active');//クリック対象の「+」「-」のトグル

//※クリック対象以外の回答を非表示したくなければ以下２行削除
$('#faq dt').not(this).next().slideUp(300);//クリック対象以外を非表示
$('#faq dt').not(this).children('span').removeClass('active');//クリック対象以外を「-」に

});
});

①開閉マークが全体に効いてしまっている

これがよくわからなかったのですが開閉ボタンクリック時にその他の回答を非表示したくなければ
ソース内コメントアウトしてある以下2行を削除してください

Comments

[Beginner_A]

解決方法をいただいていたのに、気づかずに申し訳ありませんでした。
確認してみますので、またお返事させていただきます。
ありがとうございました！！

Answer 2

開閉マークが全体に効いてしまっている

「class="active"」が両方についているからでは？

1つをクリックした後、もう1つクリックすると、"－"になってしまう

アコーディオンの仕様次第ですが、どちらか一つしかアクティブにならないのであれば
その仕様であっているのでは？
ちなみに開閉マークはcssで付加しているのでしょうか？
そのあたりがわからないのでこれ以上の回答は難しいです

Comments

[Beginner_A]

早速の回答、ありがとうございます。

続けて質問させてください。
開閉マークは、cssで付加しています。
最後の"#faq .active::after"が、全体に効いてしまっているということでしょうか。

#faq span::before,
#faq span::after {
content: '';
display: block;
width: 15px;
height: 3px;
border-radius: 5px;
background: blue;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}

#faq span::after {
background: red;
transform: translateY(-50%) rotate(90deg);
transition: 0.5s;
}

#faq .active::after {
transform: rotate(0);
transition: 0.5s;
}

よろしくお願いします。