https://www.ymo-hospital.jp/v2/wp-content/themes/sdp-base/assets/js/table-of-contents.js

1/*目次リスト*/
2
3jQuery(function ($) {
4    var idcount = 1;
5    var toc = '';
6
7    // 【toc-none】h2にクラス「toc-none」を入れたものは、目次に含まれなくなる。
8
9    jQuery("article h2", this).not('.toc-none').each(function () {
10        // article 内の h2 タグをループで順番に処理する
11        if(this.id == ""){
12            this.id = "toc-" + idcount;
13        }
14        idcount++;
15        toc += '<li><a href="#' + this.id + '">' + jQuery(this).text() + "</a></li>\n";
16    });
17    if (idcount > 2) {
18        // 見出し項目が3件以上の場合は親要素に「is-close」クラスをつけておく（クローズ状態の表示はcssにて指示）
19        jQuery("#toc").addClass("is-close");
20    }
21    if (jQuery("article h2")[0]) {
22        // 実際にソースコード上に目次のソースを流し込む（もっと見るボタンもここで流し込んでいる）
23        jQuery("#toc").html('<div>目次</div><ul>' + toc + '</ul><div class="toc-more"><a href="#"></a></div>');
24    }
25
26    jQuery(document).on('click','.toc-more > a',function(){
27        // もっと見るボタンが押された際の処理
28        jQuery("#toc").removeClass("is-close"); // 親要素の「is-close」クラスを外す
29        jQuery("#toc").html('<div>目次</div><ul>' + toc + '</ul><div class="toc-open"><a href="#"></a></div>');
30        return false;
31    });
32
33    // 閉じるボタンが押された際の処理
34    jQuery(document).on('click','.toc-open > a',function(){
35        jQuery(".toc-open").remove();
36        jQuery("#toc").addClass("is-close");
37        jQuery("#toc").html('<div>目次</div><ul>' + toc + '</ul><div class="toc-more"><a href="#"></a></div>');
38        return false;
39    });
40
41});