もっと見るで追加読み込みされるコメント一覧

<div class="d06-11-10-wrap">
          <ul class="d06-11-10-list">
            <li><span class="d06-11-10-name">なな</span><p>とても分かりやすい説明でした。</p></li>
            <li><span class="d06-11-10-name">しょう</span><p>実践してみます!</p></li>
            <li><span class="d06-11-10-name">ひろき</span><p>続編も楽しみにしています。</p></li>
          </ul>
          <button class="d06-11-10-more" type="button">もっと見る(残り4件)</button>
        </div>

.d06-11-10-wrap{width:100%;max-width:260px;display:flex;flex-direction:column;gap:8px}
        .d06-11-10-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:140px;overflow-y:auto}
        .d06-11-10-list li{background:#f1f5f9;border-radius:8px;padding:6px 10px}
        .d06-11-10-list li.d06-11-10-in{animation:d1310rise .35s ease}
        @keyframes d1310rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
        .d06-11-10-name{display:block;font-size:11px;font-weight:700;color:#374151}
        .d06-11-10-list p{margin:2px 0 0;font-size:12px;color:#4b5563}
        .d06-11-10-more{border:1px solid #e5e7eb;background:#fff;color:#6366f1;font-size:12px;font-weight:700;border-radius:999px;padding:7px 0;cursor:pointer}
        .d06-11-10-more[disabled]{color:#9ca3af;cursor:default;border-color:#e5e7eb}

(function(){
          var article = document.currentScript.closest('article');
          var root = article.querySelector('.d06-11-10');
          var list = root.querySelector('.d06-11-10-list');
          var more = root.querySelector('.d06-11-10-more');
          var queue = [
            {name:'ゆうき', text:'デザインの参考にします。'},
            {name:'あやの', text:'この視点はなかったです。'},
            {name:'そうた', text:'早速シェアしました!'},
            {name:'みほ', text:'続きが気になります。'}
          ];
          more.addEventListener('click', function(){
            more.disabled = true;
            more.textContent = '読み込み中…';
            setTimeout(function(){
              var chunk = queue.splice(0, 2);
              chunk.forEach(function(c){
                var li = document.createElement('li');
                li.className = 'd06-11-10-in';
                li.innerHTML = '<span class="d06-11-10-name"></span><p></p>';
                li.querySelector('.d06-11-10-name').textContent = c.name;
                li.querySelector('p').textContent = c.text;
                list.appendChild(li);
              });
              list.scrollTop = list.scrollHeight;
              if(queue.length > 0){
                more.disabled = false;
                more.textContent = 'もっと見る(残り' + queue.length + '件)';
              } else {
                more.disabled = true;
                more.textContent = 'すべて読み込みました';
              }
            }, 500);
          });
        })();