初心者でも簡単！｜自作目次に開閉機能を付ける

.mokuji{
   margin:0 3% 3% 3%;
  padding: 3%;
  display: none;
}

  /* CSSカウンター */
  .toc-cover ul{counter-reset: mokujiyou;
    list-style-type: none;}

    .toc-cover li:before{counter-increment: mokujiyou ;
    content: counters(mokujiyou, "-") ".";}

番号付きリストのスタイル設定について

1~5 行目の設定：

目次本体のスタイル設定

今回はほぼデフォルトのままですが、ポイントは3行目です。jQueryの .slideToggle()は、動作のガタツキ、カクツキが多く報告されますが、当サイトの目次開閉時にも発生しました。

対処方法はケースバイケースですが、当サイトでは、 paddingの%表示で抑えるのがシンプルかつ効果的でした。

7行目 ～ 12行目の設定：

目次を階層的に表示するための設定です。8行目でCSSカウンターを一旦リセットし、11,12行目で入れ子の li の表示形式を設定します。
当サイトでは、ハイフン（ “-” ）とピリオド（ “.” ）を指定しました。

counter()関数

内側のレベルの番号付けに親レベルのコンテキストが含まれない時に使用します。 

counters()関数

内側のレベルのカウントに親レベルのカウントが含まれる場合に使用します。今回の場合はこちら。 

mokujiyou　　

これはカウンター名です。”none”、”inherit”、”initial”、以外であれば任意の文字列を使えます。

＊詳細は、MDN（新しいタブで開きます）にて情報が得られます。

CSS適用後の目次画像：

この投稿の目次をご覧ください。指定された通りの表記になっているはずです。

jQuery(function($){
    $('.toc').click(function(){
    $(this).toggleClass('active');
    $(this).next().slideToggle();
		});
		});

＄（ダラー）の使用について

wordpress でjQueryを使用する場合のお約束として、「＄」を「jQuery」と書き換えます。これは、wordpress内の他ライブラリーとの ‘conflict’（コンフリクト：衝突）を発生させないための予防策です。書き換えはご使用エディタの置換機能を使うと便利です。

もう一つの方法は、コードを「jQuery(function($){ 　});」で包むことです。内包されたコードは「$」のままでも構いません。右図のとおりです。
「 $(function(){ 」▶「jQuery(function($){ 」
2行目以降の「$」は変更の必要はありません。適宜、使い分けてください。

目次開閉のしくみについて

2行目以降の解説

2行目

$('.toc').click(function(){

クラス’ toc ‘を持つ目次開閉用ボタンをクリックしたら…

3行目

$(this).toggleClass('active');

クラス’ toc ‘を持つその要素（this）つまり開閉ボタンに、
以下の処理(トグル処理)を行いなさい。

クラス ” active ”が無いなら、クラス ” active ”を付け、
クラス ” active ”が有るなら、クラス ” active ”を無くす。

上記の処理の結果、

クラス ” active ”が付けば、開閉ボタンの下に「閉じる」というテキストが現れ、
クラス ” active ”を無くせば、開閉ボタンの下に「目次を開く」というテキストが表示される。

4行目

$(this).next('nav').slideToggle();

（ this ）つまり開閉ボタンと同階層にある要素中、次の要素 （.next ）にのみ、つまり、今回は、目次本体（” ul.mokuji “）に対して、以下の処理(トグル処理)を行いなさい。

<ul.mokuji></ul>内の要素、つまり目次本体が隠されているときには、slideDown の挙動で表示させ、
<ul.mokuji></ul>内の要素、つまり目次本体が表示されているときには、slideUp の挙動で隠しなさい。