jQueryでアコーディオンパネルをclass名を付けて区別して動作させたい

Question

jQueryでアコーディオンパネルを使っていますが、複数のdlを使いたく、
class名を付けて区別したいと思い、いろいろ試しましたが上手く行かず質問させていただきます。
（questionというクラス名の部分だけにこの処理を適用したい。）
原型＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

$(function(){
    $("dd:not(:first)").css("display","none");
    $("dl dt").click(function(){
        if($("+dd",this).css("display")=="none"){
            $("dd").slideUp("slow");
            $("+dd",this).slideDown("slow");
        }
    });
})

原型ここまで＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

試してみた書き方＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

$(function(){
    $(".question dd").css("display","none");
    $(".question dt").click(function(){
        if($(".question +dd",this).css("display")=="none"){
            $(".question dd").slideUp("slow");
            $(".question +dd",this).slideDown("slow");
        }
    });
})

試してみた書き方ここまで＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

+ddの意味が分かっていないので、

".question +dd"
"+.question dd"

など書いて試してみましたが、
２つとも上手く行きませんでした。

よろしくお願いいたします。

Comments

[kei344]

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[olynstone]

ご指摘ありがとうございます！選択して<code>ボタンを押してみましたがいかがでしょうか？

Answer 1

隣接セレクタを使ったやり方なのでこう↓では。

$(function(){
    $(".question dd").css("display","none");
    $(".question dt").click(function(){
        if($("+dd",this).css("display")=="none"){
            $(".question dd").slideUp("slow");
            $("+dd",this).slideDown("slow");
        }
    });
})
```**動くサンプル：**[https://jsfiddle.net/jt6omn78/](https://jsfiddle.net/jt6omn78/)

---

【隣接兄弟結合子 - CSS: カスケーディングスタイルシート | MDN】
[https://developer.mozilla.org/ja/docs/Web/CSS/Adjacent_sibling_selectors](https://developer.mozilla.org/ja/docs/Web/CSS/Adjacent_sibling_selectors)

【【jQuery】 $(this)の親要素、子要素、隣接要素を指定する | WEB制作ブログ】
[https://www.markernet.co.jp/blog/blog/2014/08/22/post-2493/](https://www.markernet.co.jp/blog/blog/2014/08/22/post-2493/)

Comments

[olynstone]

ありがとうございます！できました。