スクロール連動アコーディオン階層目次

<div class="d06-09-07-wrap">
          <nav class="d06-09-07-toc">
            <div class="d06-09-07-group is-open" data-g="g1">
              <p class="d06-09-07-gt">1. 準備編</p>
              <div class="d06-09-07-sub">
                <a data-t="s06-09-07-1a" class="is-active">環境を整える</a>
                <a data-t="s06-09-07-1b">ツール選定</a>
              </div>
            </div>
            <div class="d06-09-07-group" data-g="g2">
              <p class="d06-09-07-gt">2. 実践編</p>
              <div class="d06-09-07-sub">
                <a data-t="s06-09-07-2a">手順の実行</a>
                <a data-t="s06-09-07-2b">検証と改善</a>
              </div>
            </div>
          </nav>
          <div class="d06-09-07-body">
            <section id="s06-09-07-1a" data-g="g1"><h4>環境を整える</h4><p>まずは記事構成の土台となる見出し設計を整理します。</p></section>
            <section id="s06-09-07-1b" data-g="g1"><h4>ツール選定</h4><p>目次生成に使うプラグインやスクリプトを選びます。</p></section>
            <section id="s06-09-07-2a" data-g="g2"><h4>手順の実行</h4><p>実際に目次を組み込み、スクロール連動の挙動を確認します。</p></section>
            <section id="s06-09-07-2b" data-g="g2"><h4>検証と改善</h4><p>読者の動きを見ながら表示や間隔を細かく調整します。</p></section>
          </div>
        </div>

.prev.d06-09-07{padding:0;display:block}
        .d06-09-07-wrap{display:flex;height:260px;font-size:12px}
        .d06-09-07-toc{flex:0 0 132px;background:#f5f6fb;border-right:1px solid #e6e8f0;padding:12px 10px;overflow-y:auto}
        .d06-09-07-gt{margin:0 0 4px;font-size:11px;font-weight:800;color:#3a2f6b}
        .d06-09-07-group{margin-bottom:6px}
        .d06-09-07-sub{max-height:0;overflow:hidden;transition:max-height .3s ease}
        .d06-09-07-group.is-open .d06-09-07-sub{max-height:120px}
        .d06-09-07-sub a{display:block;padding:4px 0 4px 10px;color:#7a8095;text-decoration:none;font-size:10.5px;line-height:1.4;border-left:2px solid #e2e4ee}
        .d06-09-07-sub a.is-active{color:#3a49d6;font-weight:700;border-left-color:#3a49d6}
        .d06-09-07-body{flex:1;overflow-y:auto;padding:14px 16px;scroll-behavior:smooth}
        .d06-09-07-body section{padding:6px 0 16px;border-bottom:1px dashed #eef0f5}
        .d06-09-07-body h4{margin:0 0 6px;font-size:13px;color:#242a3d}
        .d06-09-07-body p{margin:0;color:#666c80;line-height:1.7}

(function(){
        var root=document.getElementById('item-06-09-07');if(!root)return;
        var body=root.querySelector('.d06-09-07-body');
        var groups=root.querySelectorAll('.d06-09-07-group');
        var links=root.querySelectorAll('.d06-09-07-sub a');
        var secs=root.querySelectorAll('.d06-09-07-body section');
        function upd(){
          var st=body.scrollTop+30,cur=secs[0];
          secs.forEach(function(s){if(s.offsetTop-body.offsetTop<=st)cur=s;});
          var curId=cur.id,curG=cur.getAttribute('data-g');
          links.forEach(function(a){a.classList.toggle('is-active',a.getAttribute('data-t')===curId);});
          groups.forEach(function(g){g.classList.toggle('is-open',g.getAttribute('data-g')===curG);});
        }
        body.addEventListener('scroll',upd);upd();
      })();