jQueryのアコーディオン一番目だけを最初から開いた状態にしておく方法

色々と試してみましたがうまくいかず、ご教示頂けないでしょうか？
現在、以下のようなhtmlになっております。

<dl id="learning-method">
<dt>一番目</dt>
<dd>一番目展開部分</dd>
<dt>二番目</dt>
<dd>二番目展開部分</dd>
<dt>三番目</dt>
<dd>三番目展開部分</dd>
</dl>

jQueryは以下です。

<script type="text/javascript">
$(function() {
$('#learning-method dd').hide();
$('#learning-method dt').click(function() {
$(this).toggleClass('active');
$(this).next().slideToggle();
});
});
</script>

最初から一番目のddだけ開いておきたいのですが、jQueryをどのように記述すればよいでしょうか？
dtをクリックすると他と同じように閉じるようにしたいです。

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

No.1 回答者： fujillin 回答日時： 2020/07/16 23:30

こんばんは

＞最初から一番目のddだけ開いておきたいのですが
今、環境がないので確認はしていませんが、方法はいろいろあると思いますけれど、イベントをセットした後で、最初のdt要素をクリックしておくとかではいかがでしょうか？
　　～～ .eq(0).click()
とか。

＞dtをクリックすると他と同じように閉じるようにしたいです。
CSSが不明なのではっきりしない部分がありますが、ご提示のスクリプトには直接閉じる記述が見当たらないようですけれど、現状でクリック時に閉じるようになっているのでしょうか？
もしも、現状でも閉じないのであれば、イベント処理内でdd要素をまとめて閉じてから、クリックされたものだけ開くようにすればよろしいかと。

この回答へのお礼

ありがとうございます。参考になりました。

お礼日時：2020/07/17 12:29

No.2 回答者： fujillin 回答日時： 2020/07/17 09:22

No1です。

よく見たら、クラスactiveもつけっぱなしのようですが、なんだか違うのではないかなぁ…
開いているdtだけにactiveクラスが設定されるようにするおつもりなのではないかと勝手に推測。

想像するところ、こんな感じではいかがかと。
$(function() {
$('#learning-method dd').hide();
let tg = (s)=>{ $(s).toggleClass('active').next().slideToggle(); };
$('#learning-method dt').click(function() {
if(!$(this).hasClass('active')) tg('#learning-method dt.active');
tg(this);
}).eq(0).click();
});

この回答へのお礼

ありがとうございます。参考になりました。

お礼日時：2020/07/17 12:29