I have a page build with products that when clicked a panel above shows a content related to the product.

this is my sloppy code to accomplish it

$(document).ready(function(){
 
  $( ".tab-1-th" ).on( "click", function() {
      $('.hdr-tab').hide().removeClass("active in");
      $('#tabs-1').fadeIn();
  });
  $( ".tab-2-th" ).on( "click", function() {
      $('.hdr-tab').hide().removeClass("active in");
      $('#tabs-2').fadeIn();
  });
  $( ".tab-3-th" ).on( "click", function() {
      $('.hdr-tab').hide().removeClass("active in");
      $('#tabs-3').fadeIn();
  });
  $( ".tab-4-th" ).on( "click", function() {
      $('.hdr-tab').hide();
      $('#tabs-4').fadeIn();
  });
  $( ".tab-5-th" ).on( "click", function() {
      $('.hdr-tab').hide();
      $('#tabs-5').fadeIn();
  });
  $( ".tab-6-th" ).on( "click", function() {
      $('.hdr-tab').hide();
      $('#tabs-6').fadeIn();
  });
  $( ".tab-7-th" ).on( "click", function() {
      $('.hdr-tab').hide();
      $('#tabs-7').fadeIn();
  });
  $( ".tab-8-th" ).on( "click", function() {
      $('.hdr-tab').hide();
      $('#tabs-8').fadeIn();
  });

What I need help with is updating my code in a way that wolud I could target each panel with unique URL from external links

Basically by clicking a link from another page I would have a specific panel open on another page.

Her is a page I am working on:

http://azauth.kraftcanada.com/brands/philadelphia/whipped/philly-whipped-products