折りたたみ可能な目次パネル

<div class="d06-09-05-wrap">
          <button class="d06-09-05-toggle" type="button">☰ 目次を見る <span class="d06-09-05-arrow">▾</span></button>
          <div class="d06-09-05-panel">
            <a href="#" data-t="s06-09-05-1">はじめに</a>
            <a href="#" data-t="s06-09-05-2">課題整理</a>
            <a href="#" data-t="s06-09-05-3">改善のステップ</a>
            <a href="#" data-t="s06-09-05-4">まとめ</a>
          </div>
          <div class="d06-09-05-body">
            <section id="s06-09-05-1"><h4>はじめに</h4><p>ボタンを押すと目次パネルが開閉します。項目を選ぶと本文がその位置まで移動します。</p></section>
            <section id="s06-09-05-2"><h4>課題整理</h4><p>目次を常時表示すると本文が狭くなるため、必要な時だけ開く形式が好まれます。</p></section>
            <section id="s06-09-05-3"><h4>改善のステップ</h4><p>開閉ボタンと本文位置の連動を実装することで、省スペースかつ実用的な目次になります。</p></section>
            <section id="s06-09-05-4"><h4>まとめ</h4><p>折りたたみ式は特にスマホ表示の記事と相性の良い目次形式です。</p></section>
          </div>
        </div>

.prev.d06-09-05{padding:0;display:block}
        .d06-09-05-wrap{position:relative;height:260px;display:flex;flex-direction:column}
        .d06-09-05-toggle{flex:0 0 auto;margin:14px 14px 0;font-size:12px;font-weight:700;color:#3a2f6b;background:#eceaff;
          border:none;border-radius:10px;padding:9px 14px;text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between}
        .d06-09-05-arrow{transition:transform .25s}
        .d06-09-05-wrap.is-open .d06-09-05-arrow{transform:rotate(180deg)}
        .d06-09-05-panel{position:absolute;left:14px;right:14px;top:52px;background:#fff;border:1px solid #e6e8f0;border-radius:10px;
          box-shadow:0 10px 24px rgba(40,50,90,.14);padding:8px;display:flex;flex-direction:column;gap:2px;
          max-height:0;overflow:hidden;opacity:0;transition:max-height .3s,opacity .25s;z-index:2}
        .d06-09-05-wrap.is-open .d06-09-05-panel{max-height:200px;opacity:1}
        .d06-09-05-panel a{padding:8px 10px;border-radius:6px;font-size:12px;color:#4a5068;text-decoration:none}
        .d06-09-05-panel a:hover{background:#f2f3fa;color:#3a49d6}
        .d06-09-05-body{flex:1;overflow-y:auto;padding:14px 18px 16px;scroll-behavior:smooth}
        .d06-09-05-body section{padding:6px 0 16px;border-bottom:1px dashed #eef0f5}
        .d06-09-05-body h4{margin:0 0 6px;font-size:13px;color:#242a3d}
        .d06-09-05-body p{margin:0;font-size:12px;color:#666c80;line-height:1.7}

(function(){
        var root=document.getElementById('item-06-09-05');if(!root)return;
        var wrap=root.querySelector('.d06-09-05-wrap');
        var body=root.querySelector('.d06-09-05-body');
        var toggle=root.querySelector('.d06-09-05-toggle');
        var links=root.querySelectorAll('.d06-09-05-panel a');
        toggle.addEventListener('click',function(){wrap.classList.toggle('is-open');});
        links.forEach(function(a){
          a.addEventListener('click',function(e){
            e.preventDefault();
            var t=root.querySelector('#'+a.getAttribute('data-t'));
            if(t){body.scrollTop=t.offsetTop-body.offsetTop-6;}
            wrap.classList.remove('is-open');
          });
        });
      })();