Q&A
問題なく動作しました。おそらくここに書かれていない部分が原因かと思います。
###前提・実現したいこと
アコーディオンを実装しているのですが、開いた状態のまま表示されてしまいます。
最初から閉じた状態で表示させたいです。
・適応させようとしているサイトはコチラです。
下記の方法で問題なく動作したという方がいらっしゃったので、自分のテンプレートの部分と何か相性が悪いのかもしれません。
###自分のトップページ（明らかに不要な部分は消してます。）
<!DOCTYPE html> <html lang="ja" class="col2"> <head> <title>タイトル</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="keywords" content="あ"> <meta name="description" content="あ"> <link rel="stylesheet" href="./css/base.css"> <link rel="stylesheet" href="./css/rwd.css"> <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico"> <link rel="apple-touch-icon" href="./images/apple-touch-icon.png"> <link rel="apple-touch-icon-precomposed" href="./images/apple-touch-icon.png"> <link rel="icon" href="./images/apple-touch-icon.png"> <!--[if lt IE 9]> <script src="./js/html5.js"></script> <![endif]--> <script src="./js/jquery.js" charset="utf-8"></script> <script src="./js/jquery-migrate.js" charset="utf-8"></script> <!--▼私が入れたアコーディオンー--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <script> $(function(){ $("#acMenu dt").on("click", function() { $(this).next().slideToggle(); }); }); </script> <!--▲私が入れたアコーディオンー--> </head> <body class="home"> ＜サイトヘッダーとグローバルナビ＞ <div class="main-body"> <div class="main-body-in"> <main> <div class="main-conts"> <section class="section-wrap"> <div class="section-in"> <div id="text1"> <p>検証用です。</p> <p> </p> <p>下記部分、<br />『<span style="color:#FF0A0A">これを表示させたい</span>』<br />が消えていたら正解</p> <p> </p> <p>-----ここからアコーディオン部分です-----</p> <dl id="acMenu"> <dt><span style="font-size:20px" class="lbg"><strong>これをクリックしたら</strong></span></dt> <dd> <p><span style="color:#FF0A0A">これを表示させたい（これ見えてたらあかんやつ★これを表示させたい（これ見えてたらあかんやつこれを表示させたい（これ見えてたらあかんやつこれを表示させたい（これ見えてたらあかんやつこれを表示させたい（これ見えてたらあかんやつこれを表示させたい（これ見えてたらあかんやつこれを表示させたい（これ見えてたらあかんやつこれを表示させたい（これ見えてたらあかんやつこれを表示させたい（これ見えてたらあかんやつこれを表示させたい（これ見えてたらあかんやつこれを表示させたい（これ見えてたらあかんやつ</span></p> </dd> </dl> <p>-----ここまでアコーディオン部分です-----</p> </div> </div> </div> </main> </aside> <!--▲サブコンテンツ--> </div><!--main-body-in--> </div><!--main-body--> <!--▼サイトフッター--> <script src="./js/utility.js" charset="utf-8"></script> <script src="./js/socialButton.js" charset="utf-8"></script>
過去に同じ質問をさせれいる方がいらっしゃり、
その回答の display:none;を追加したのですが、うまくいきません。
リンク内容
###自分なりのソースコード
</head>の直前に次のスクリプトを記入 ``` <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <script> $(function(){ $("#acMenu dt").on("click", function() { $(this).next().slideToggle(); }); }); </script> ``` styles.css の最下部に以下を記入 ``` /* アコーディオンメニュー */ #acMenu dt{ display:block; cursor:pointer; } #acMenu dd{ display:none; } ``` 本文に適応させたい文字 ``` <dl id="acMenu"><dt>これをクリックしたら</dt> <dd>これを表示させたい</dd></dl>###参考になるかどうか・・・ ・XサーバーX10プランを使っています。 ・[適応させようとしているサイトはコチラです。](http://xn--rckyc9ep71m42vklfn05b.xyz/)
そうなんですね。。。ありがとうございます、使っているテンプレートに入っているコードの問題かもしれませんね。。。ありがとうございます。
ご提示の全体コードで再度試してみましたが、問題なく「これ見えてたらあかんやつ」は隠れていました。また、ご提示のサイトを拝見したところ、いまのところ「隠すCSS」は使っていないようでしたので、開発者ツールでCSSを加えたところ、やはり問題なく動作しました。
Lhankor_Mhy様のヒントで、違うスタイルシートを適応させてた事に気づきました。本当に感謝です、ありがとうございました；；
それはそれは。お疲れさまでした。
自己解決
