Question

$('.product-nav li a').click(function() {
  $('.product-nav li').removeClass('active');
  $(this).parent().addClass('active');
  if( $(this).hasClass('tshirts') ){
    $('product').hide();
    $('.product.tshirt').show();
  }
});

.. active class is assigned correctly but the products are not hidden/shown as desired because I think the if condition is not recognized on click?

Answer 1

What element is product?

$('product').hide();

You are missing the .

$('.product').hide();