ワードプレスで隠し文字を入れたのですが、最初から開いた状態になってしまいます。

Question

###ワードプレスで隠し文字を実装したいのですが、隠し文字が開かれた状態がデフォルトになってしまいます。⇒最初は閉じた状態にしたいです。

①header.phpに下記を追加しました。

<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>

###発生している問題

サンプルページ
ページを見ると、分かるように、最初からネタバレが表示されています。。。

やりたいのは、

クリックしたらネタバレが表示されるようにしたいです。

###他のプラグインでもいいのですが、できればこのコードを使用したいと思っています。

WordpressのプラグインExpander等でも代用可能だとは思うのですが、
なるべくこの

<dl id="acMenu"><dt>ネタバレを見る</dt>
<dd>この映画の結末は・・・</dd></dl>

を使いたいです。

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

Answer 1

『ネタバレを見る』の文字が上手く表示されてないのが問題ではないですよね？

文字が重なった部分を押すと問題無く動くのでブラウザを変えてみるとかキャッシュを削除してみるとか。

Comments

[makironng]

うわああぁあ、本当ですね！キャッシュの問題でした、ごめんなさい。
なんで文字がぐちゃってなってるかは分からないですね。。。。
研究してみます。ありがとうございましたm(_ _)m
助かりました。。。