jQueryのアコーディオンについて

Question

###前提・実現したいこと
アコーディオンでdd要素をhideしたい

###発生している問題・エラーメッセージ
アコーディオンでdd要素をhideできない

###該当のソースコード
HTMLのソースコード

<dl class="accordion">
<dt>HTML</dt>
<dd>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</dd>

<dt>CSS</dt>
<dd>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</dd>

<dt>javascript</dt>
<dd>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</dd>

<dt>jQuery</dt>
<dd>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</dd>
</dl>

JQUERYのソースコード

<script>

$(function(){
$(".accordion > dd:not(:first)").hide();
});



</script>

CSSのソースコード

@charset "utf-8"

dl {
width: 600px;
}

dt {
line-height: 35px;
font-size: large;
font-weight: bold;
color: white;
height: 35px;
background: black;
}

dd {
margin: 0;
height: 50px;
background: #d4d0c8;
}

###試したこと
;が抜けていないかなど基礎的な事。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

Comments

[kei344]

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

[aab]

ありがとうございます。
変更しました。

Answer 1

動くサンプル：https://jsfiddle.net/qzrr9gqq/

dd要素はきちんと消えていますよ。

Comments

[aab]

回答ありがとうございます。
chromeでプレビューして確認しましたがdd要素は消えていませんでした。
この場合は何が原因でしょうか？

[kei344]

dd要素の中には「あああ･･･」しか入っていません。また、:not(:first)をしているので1番目は表示されます。

「CSS」「javascript」「jQuery」を消したければ dt要素も非表示にする必要があります。

[aab]

ありがとうございます。
ddもdtもなにをやっても隠れませんでした。

[kei344]

画像を添付しました。
提示したサンプル（ https://jsfiddle.net/qzrr9gqq/ ）がこうなっていないということですか？

[aab]

はい。全くその通りです。

[kei344]

スクリーンショットを質問文に追記していただけませんか？

[aab]

スクリーンショットと言っても「CSS」「javascript」「jQuery」の3つが隠れていない画像のままです。つまりkei344さんのスクリーンショットの状態になっていないままです。

スクリーンショットの添付したいのですがエラーが出てしまう（添付されない）ため、文章での説明となってしまいました。申し訳ございません。

[kei344]

スクリーンショットでは
https://jsfiddle.net/qzrr9gqq/
これを開いていませんよね。

scriptタグの前でjQueryが読み込めていないです。パスの問題か書き方の問題かどちらかだと思います。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>$(function(){});</script>

追記：https://teratail.com/uploads/contributed_images/14b11facf09322788a132cf4a6d52625.png にアップロードはされていますが、反映されていないようですね。teratail のシステムが遅いだけでそのうち反映されると思います。

[aab]

ありがとうございます。
もう一回確認してみます。

[kei344]

https://jsfiddle.net/qzrr9gqq/
これを開いて確認したかどうか、その結果を書いてください。

[kei344]

どのように解決したかコードを回答欄に追記いただけませんか？このページに辿り着いた同じ疑問を持つ人のために、ぜひお願いします。