如何在页面加载时基于锚标记在div之间切换？

Question

I'm toggling between two divs that display pricing options. It defaults to the first option on page load. Using an anchor link, how can I have the toggle launch option two?

Here's the page for reference. and a Fiddle of a condensed version to show the code I'm working with. I want the "Club and Youth" pricing to show when #Club-Youth is anchored to the URL.

Any help is greatly appreciated!

HTML

<div class="pricing-switcher">
  <a class="toggle active" id="HS-College">High School and College</a>
  <a class="toggle" id="Club-Youth">Club and Youth</a>
</div>

<div class="pricing-wrapper">
  <div class="panels HS-College">Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1</div>
  <div class="panels Club-Youth hide">Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 Option 2</div>
</div>

CSS

.panels {
  display: flex;clear:both;
  padding-bottom: 30px;
}

.panels.HS-College {
  justify-content: center;
}

.panels.hide {
  display: none 
}

.pricing-switcher {
  float: left;
  width: 100%;
}

.toggle {
  float: left;
  display: flex;
  border: 2px solid #000;
  margin-right: 10px;
  cursor: pointer;
}

.toggle.active {
  background-color: red;
}

JS Toggle

$(document).ready(function(){
  $('.toggle').click(function(){
    var self = $(this);  
    $('.panels').addClass('hide');
    $('.toggle').removeClass('active');
    self.addClass('active');
    $('.panels.'+ self.attr('id')).removeClass('hide');
  });
});

Answer 1

$(window.location.hash).click();

window.location.hash will return #Club-Youth from the below url.

https://www.hudl.com/products/assist/volleyball?token=K6~s9DTGVrSKh~X9VMetZv6YLKSMtAAp#Club-Youth

Using $(window.location.hash) will be the same as $('#Club-Youth') and fire the click event on that element.

Make sure this code is below your $('.toggle').click(function(){}) so it fires the code you have attached already.

Answer 2

Look for a hash value in the URL on page load

var hash = window.location.hash;
if (!(typeof object === 'undefined')) {
   // show/hide based on value of hash
   if (hash=='Club-Youth') {
      // show panel 1
   } else {
      // show panel 2
   }
}