前提・実現したいこと
アコーディオンを実装しているのですが、開いた状態のまま表示されてしまいます。
最初から閉じた状態で表示させたいです。
・適応させようとしているサイトはコチラです。
下記の方法で問題なく動作したという方がいらっしゃったので、自分のテンプレートの部分と何か相性が悪いのかもしれません。
自分のトップページ（明らかに不要な部分は消してます。）
<!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プランを使っています。
・適応させようとしているサイトはコチラです。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.34%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
Lhankor_Mhy
2017/07/01 14:28
問題なく動作しました。おそらくここに書かれていない部分が原因かと思います。
hotmikan
2017/07/01 14:32
そうなんですね。。。ありがとうございます、使っているテンプレートに入っているコードの問題かもしれませんね。。。ありがとうございます。
Lhankor_Mhy
2017/07/01 15:19
ご提示の全体コードで再度試してみましたが、問題なく「これ見えてたらあかんやつ」は隠れていました。また、ご提示のサイトを拝見したところ、いまのところ「隠すCSS」は使っていないようでしたので、開発者ツールでCSSを加えたところ、やはり問題なく動作しました。
hotmikan
2017/07/01 15:40
Lhankor_Mhy様のヒントで、違うスタイルシートを適応させてた事に気づきました。本当に感謝です、ありがとうございました；；
Lhankor_Mhy
2017/07/01 15:44
それはそれは。お疲れさまでした。