タグ絞り込みレビュー一覧

<div class="d06-01-12-wrap">
          <div class="d06-01-12-tags">
            <button type="button" class="d06-01-12-tag is-on" data-f="all">すべて</button>
            <button type="button" class="d06-01-12-tag" data-f="speed">対応速度</button>
            <button type="button" class="d06-01-12-tag" data-f="quality">品質</button>
          </div>
          <div class="d06-01-12-list">
            <div class="d06-01-12-c" data-c="speed"><p>返信がとても早く助かりました。</p><cite>K 様</cite></div>
            <div class="d06-01-12-c" data-c="quality"><p>仕上がりのクオリティに大満足です。</p><cite>S 様</cite></div>
            <div class="d06-01-12-c" data-c="speed quality"><p>スピードも品質も期待以上でした。</p><cite>T 様</cite></div>
          </div>
        </div>

.d06-01-12-wrap{width:100%;max-width:290px}
        .d06-01-12-tags{display:flex;gap:6px;justify-content:center;margin-bottom:14px;flex-wrap:wrap}
        .d06-01-12-tag{border:1px solid #e2e8f0;background:#fff;border-radius:999px;padding:5px 14px;font-size:11px;color:#64748b;cursor:pointer;transition:.2s}
        .d06-01-12-tag.is-on{background:#0ea5e9;border-color:#0ea5e9;color:#fff}
        .d06-01-12-list{display:flex;flex-direction:column;gap:10px}
        .d06-01-12-c{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:12px 14px;font-size:12px;color:#334155;transition:opacity .3s,transform .3s}
        .d06-01-12-c.is-hide{display:none}
        .d06-01-12-c p{margin:0 0 6px;line-height:1.6}
        .d06-01-12-c cite{font-style:normal;font-weight:700;color:#0f172a;font-size:11px}

(function(){
        var root=document.querySelector('#item-06-01-12 .d06-01-12-wrap');if(!root)return;
        var tags=root.querySelectorAll('.d06-01-12-tag'),cards=root.querySelectorAll('.d06-01-12-c');
        tags.forEach(function(t){
          t.addEventListener('click',function(){
            tags.forEach(function(x){x.classList.remove('is-on');});
            t.classList.add('is-on');
            var f=t.dataset.f;
            cards.forEach(function(c){
              var cats=(c.dataset.c||'').split(' ');
              c.classList.toggle('is-hide',f!=='all'&&cats.indexOf(f)===-1);
            });
          });
        });
      })();