Filtering items using tabs is extremely common for portfolios. We assign data attributes to the tabs and the content, then match them in JS.

The Filter Logic

JAVASCRIPT CODE
const tabs = document.querySelectorAll('.tab');
const items = document.querySelectorAll('.item');

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // Remove active styles
    tabs.forEach(t => t.classList.remove('active'));
    tab.classList.add('active');
    
    // Filter
    const target = tab.dataset.target;
    items.forEach(item => {
      if (target === 'all' || item.classList.contains(target)) {
        item.style.display = 'block';
      } else {
        item.style.display = 'none';
      }
    });
  });
});

Try the Live Demo to elegantly filter the image gallery using the tabs above it!