CODEWITHSUNDEEP
javascriptjquerycsstoggleanchor
Allie Ward
Allie Ward

Reputation: 33

How do I toggle between divs based on anchor tag on page load?

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');
  });
});

Upvotes: 3

Views: 218

Answers (2)

Sean Wessell
Sean Wessell

Reputation: 3510

$(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.

Upvotes: 3

daddygames
daddygames

Reputation: 1928

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
   }
}

Upvotes: 1

Related Questions