【はてなブログ】目次を表示/非表示する方法

- 作者: JOE AOTO
- 出版社/メーカー: ソーテック社
- 発売日: 2016/07/22
- メディア: Kindle版
- この商品を含むブログを見る
目次を表示/非表示する方法
ヘッダ若しくはフッダのHTMLに以下のJavaScriptを記述します。最近はbodyタグの末尾に記述するのが主流らしいですね。とりあえず、今回はフッダに記述しました。
JavaScript
// jQuery読み込み <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> // 目次 表示/非表示ボタン <script> $(function(){ var $Contents = $(".table-of-contents") $($Contents).before('<span style="font-size: 150%; color: #333;">目次</span><p class="show-area">[表示]</p>'); $(".show-area").click(function(){ var $this = $(this); if($Contents.css('display') == 'none'){ $Contents.slideDown(400), $this.text("[非表示]"); }else{ $Contents.slideUp(400), $this.text("[表示]") }; }); }); </script>
CSS
.table-of-contents{ display:none } .show-area{ cursor: pointer; color: #47a1e5 }
参考
はてなブログ Perfect GuideBook

- 作者: JOE AOTO
- 出版社/メーカー: ソーテック社
- 発売日: 2016/07/22
- メディア: Kindle版
- この商品を含むブログを見る