【はてなブログ】目次の表示・非表示切り替え方法

はてなブログで「目次の表示・非表示切り替える」ための設定

本ページの設定をするにあたっては、他のブロガ様の設定を参考にしました。
が、試行錯誤をして作成したこともあり引用元を記載できておらず申し訳ありません。

従いまして、本ページの設定を使用されるにあたり、引用元として本 URL を記載いただく必要はありません。
本ページの内容が、はてなブロガの皆様のお役に立てば幸いです。

なお、動作については、はてなPro でのみ確認しています。

 

動作

初期状態は目次の内容を表示しているが、"目次" 横に作成した [隠す] を押下すると目次を閉じる機能を提供する。

↓ 目次を表示した状態 (デフォルト)
f:id:dnkrnka:20180722221925p:plain:w500
 

↓ 目次を閉じた状態
f:id:dnkrnka:20180722222026p:plain:w500

コード

ダッシュボードより、デザイン → カスタマイズ → フッタ に以下を記述する。

<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: 180%; color: #0000fa;"><b>目次</b></span><p class="show-area">[隠す]</p>');
   $(".show-area").click(function(){
        var $this = $(this);
        if($Contents.css('display') != 'none'){
            $Contents.slideUp(400) // 目次が表示された状態
            $this.text("[表示]")
        }else{
            $this.text("[隠す]");
            $Contents.slideDown(400) // 目次が表示された状態
        };
    });    
});
</script>