###前提・実現したいこと
アコーディオンを実装しているのですが、開いた状態のまま表示されてしまいます。
最初から閉じた状態で表示させたいです。
・適応させようとしているサイトはコチラです。
下記の方法で問題なく動作したという方がいらっしゃったので、自分のテンプレートの部分と何か相性が悪いのかもしれません。
###自分のトップページ(明らかに不要な部分は消してます。)
<!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/)
回答1件
あなたの回答
tips
プレビュー