一覧⇔地図 スライド切り替えタブ

<div class="d10-13-10-panel">
          <div class="d10-13-10-tabs">
            <button class="d10-13-10-tab is-active" data-view="list" type="button">一覧</button>
            <button class="d10-13-10-tab" data-view="map" type="button">地図</button>
          </div>
          <div class="d10-13-10-viewport">
            <div class="d10-13-10-track">
              <div class="d10-13-10-pane d10-13-10-list">
                <span class="d10-13-10-row"></span>
                <span class="d10-13-10-row"></span>
                <span class="d10-13-10-row"></span>
              </div>
              <div class="d10-13-10-pane d10-13-10-map">
                <span class="d10-13-10-grid"></span>
                <span class="d10-13-10-pin" style="left:30%;top:40%"></span>
                <span class="d10-13-10-pin" style="left:62%;top:62%"></span>
              </div>
            </div>
          </div>
        </div>

.d10-13-10{padding:16px}
        .d10-13-10-panel{width:100%;max-width:280px}
        .d10-13-10-tabs{display:flex;gap:6px;margin-bottom:8px}
        .d10-13-10-tab{flex:1;border:1px solid #dde3e8;background:#fff;color:#556;font-size:12px;font-weight:700;padding:6px 0;border-radius:8px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
        .d10-13-10-tab.is-active{background:#2f7fef;border-color:#2f7fef;color:#fff}
        .d10-13-10-viewport{position:relative;width:100%;height:130px;overflow:hidden;border-radius:10px;border:1px solid #e6ecf0}
        .d10-13-10-track{display:flex;width:200%;height:100%;transition:transform .4s ease}
        .d10-13-10-track.is-map{transform:translateX(-50%)}
        .d10-13-10-pane{width:50%;flex:0 0 50%;position:relative}
        .d10-13-10-list{padding:10px;display:flex;flex-direction:column;gap:8px;background:#fff}
        .d10-13-10-row{display:block;height:24px;border-radius:6px;background:#f2f6f9}
        .d10-13-10-map{background:#eaeef0;overflow:hidden}
        .d10-13-10-grid{position:absolute;inset:0;background-image:linear-gradient(#dbe1e5 1px,transparent 1px),linear-gradient(90deg,#dbe1e5 1px,transparent 1px);background-size:26px 26px}
        .d10-13-10-pin{position:absolute;width:14px;height:14px;margin:-14px 0 0 -7px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#e2504a;border:2px solid #fff}

(function(){
        var root=document.getElementById('item-10-13-10');if(!root)return;
        var tabs=root.querySelectorAll('.d10-13-10-tab');
        var track=root.querySelector('.d10-13-10-track');
        tabs.forEach(function(tab){
          tab.addEventListener('click',function(){
            tabs.forEach(function(t){t.classList.remove('is-active');});
            tab.classList.add('is-active');
            var view=tab.getAttribute('data-view');
            track.classList.toggle('is-map',view==='map');
          });
        });
      })();