jqueryのアコーディオンでクリックイベントでクラス付与し、違う項目が選択されたら削除して選択された項目に付与したい

クリックすると非表示の内容が開き、:beforeのアイコンも変化するアコーディオンを作っています。
開閉はうまくいきますが、アイコンのクラス付与が全ての項目に当たってしまうので、これを
一つだけにしたいです。
レクチャーいただけますと幸いです。

html

<dl>
<div class="bg">
<dt class="news_title">

text</dt>
<dd class="news_body" ><p>text</p>
 </dd>
</div>

<div class="bg">
<dt class="news_title">

text</dt>
<dd class="news_body" ><p>text</p>
 </dd>
</div>
</dl>

  $(dl dd').hide();
  $('dl dt')
    .click(function(e){
      //$('dl dd').slideUp(500);
      $('+dd', this).slideToggle(500);
      $('.news_title').toggleClass("close");
    })
});

news_titleのdt::beforeでアイコン変化にcss

現状
クリックするとnews_titleすべてに closeのクラスが付与されてしまう。

<dl>
<div class="bg">
<dt class="news_title">

text</dt>
<dd class="news_body" ><p>text</p>
 </dd>
</div>

<div class="bg">
<dt class="news_title">

text</dt>
<dd class="news_body" ><p>text</p>
 </dd>
</div>
</dl>
↓
<dl>
<div class="bg">
<dt class="news_title close">

text</dt>
<dd class="news_body" ><p>text</p>
 </dd>
</div>

<div class="bg">
<dt class="news_title  close">

text</dt>
<dd class="news_body" ><p>text</p>
 </dd>
</div>
</dl>

再現したいhtml
クリックしたら一つ目に closeし、2個目選択したら一つ目は削除され２つ目にclose付与

<dl>
<div class="bg">
<dt class="news_title close">

text</dt>
<dd class="news_body" ><p>text</p>
 </dd>
</div>

<div class="bg">
<dt class="news_title">

text</dt>
<dd class="news_body" ><p>text</p>
 </dd>
</div>
</dl>

codepenコード

https://codepen.io/kkcol/pen/qBYVYeE

以下で希望通りの動きになりました
js

$(function(){
  $('.info dl dd').hide();
  $('.info dl dt').on('click',function(){
    $('.info dl dt').not(this).next('dd');
    $(this).toggleClass("close").next('dd').slideToggle(500);
  });
});

hatena19

2022/09/26 03:20

CSSコードも提示してください。

hatena19

2022/09/26 03:34

あと、HTMLもこちらで動作確認できるHTMLコードを提示してください。 jQueryの方では、.info があるのに、HTMLには infoクラスがないです。質問は編集できるので、上記を考慮して質問を編集してください。

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

回答2件

ベストアンサー

いまひとつ希望する挙動がわかりませんが、開いているアコーディオンにcloseクラスをつけるのでしょうか？

javascript
1$(function(){
2  $('.info dd').hide();
3  $('.info dt').on('click',function(){
4    $('.info dt').not(this).removeClass("close").next('dd').slideUp(500);
5    $(this).toggleClass("close").next('dd').slideToggle(500);
6  });
7});

投稿2022/09/26 03:16

yambejp

総合スコア114843

nanashissss

2022/09/26 03:29

ありがとうございます。わかりやすい説明ですみません。一点注文なんですが、こちらddの方はクリックイベントがないと開閉できないように変更可能ですか？一度に複数のパネルを開いた状態にできる開閉パネルです

yambejp

2022/09/26 04:01

$('.info dt').not(this).removeClass("close").next('dd').slideUp(500); ↓↓↓ $('.info dt').not(this).removeClass("close"); では駄目ですか？

nanashissss

2022/09/26 04:19

ありがとうございます。複数のパネルを開いた状態になりました。アイコンの方が一個ずつしか動作しないので残りは確認します

nanashissss

2022/09/26 05:40

ありがとうございます。ソースコード参考になんとか希望通りの動きになりました！

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

情報不足なので動作確認はしてませんが、
下記でどうでしょう。

JavaScript/jQuery
1$(function () {
2  $(".info dl dd").hide();
3  $(".info dl dt").click(function (e) {
4    $('.info dl dd').not($("+dd", this)).slideUp(500);
5    $("+dd", this).slideToggle(500);
6    $(".info dl dt").not($(this)).removeClass("close");
7    $(this).toggleClass("close");
8  });
9});