← back to NationalPaperHangers

public/js/portfolio-tabs.js

16 lines

// "In the Seams" portfolio tabs — UX idea #1.
// Tiny vanilla-JS swap: click a tab, fade in the matching shot.
(function () {
  document.addEventListener('click', (e) => {
    const btn = e.target.closest('.portfolio-tab[data-shot-target]');
    if (!btn) return;
    const card = btn.closest('.portfolio-card-tabbed');
    if (!card) return;
    const target = btn.dataset.shotTarget;
    card.querySelectorAll('.portfolio-tab').forEach(t => t.classList.toggle('is-active', t === btn));
    card.querySelectorAll('.portfolio-shot').forEach(img => {
      img.classList.toggle('is-active', img.dataset.shot === target);
    });
  });
})();