【jQuery】ボタン式目次を通常のボックスに変更するにはどうすれば良いのか？

Question

画像のようなボタン式目次を、普通のボックスに変更したいです。（参考にしたサイトはこちらになります→http://aisyuudog.hatenablog.com/entry/2018/02/13/210000）
具体的には、クリックすると『漫画のあらすじ』が表示されるようにしたいです。

つきましては、質問が2つございます。

①リンクではなく、普通の文字にするには、どうコードを書き換えれば良いのか？
②参考サイトでは下記のjqueryのコード、をはてなブログのフッター部分に貼り付けるという事になっているが、このフッター部分とは、wordpressだとどの部分に当たるのか？

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>// <![CDATA[
//クリックすると表示される目次
$(function(){
    var $Contents = $(".table-of-contents")
    $($Contents).before('<div class="show-area">▶目次を開く</div>');
    $(".show-area").click(function(){
        var $this = $(this);
        if($Contents.css('display') == 'none'){
            $Contents.slideDown(400),
            $this.text("▶目次を閉じる")
        }else{
            $Contents.slideUp(400),
            $this.text("▶目次を開く");
        };
    });
});
// ]]></script>

質問や文章が分かりずらくて申し訳ありません。
知識不足ゆえに言語化するのが難しく...
お答え頂けますと幸いです。

Answer 1

WordPressには参考サイトに掲載されている「はてなブログ」ような「目次機能」がデフォルトでは（プラグインを使ったり自分で組まない場合）ありません。
なので、質問文に提示されたコードだけ書いても目次は表示されません。

Comments

[mattyaratte]

すみません。自分の質問の仕方が悪かったです。
目次を表示したいのではなく、上記の目次のような、【クリックすると開く囲み枠】を作成したいのです。
【クリックすると開く囲み枠】を作成する際に、上記の目次を応用すれば、全く同じ見た目の囲み枠を作れると考えたため、質問させて頂きました。
このような事は可能でしょうか？

[kei344]

> 上記の目次を応用すれば、全く同じ見た目の囲み枠を作れる
HTML/CSSの構造が同じであれば見た目は同じにできるとは思います。
WordPressはデフォルトでjQueryを読み込む設定のため、書かれたコードの一部は変更する必要が出るとは思います。（「WordPress jQuery 書き方」とかで検索してください）