Link to a page then open JQuery tab

Question

I have a basic responsive tabbing layout that I use as a template for my websites.

I want to be able to link to the page containing the tabs (below code) but open the page with 1 specific tab selected.

For example, I have 3 buttons they link to button 1, 2 and 3 respectively. I click 'Button 2'. I want the page to open with the 'Button 2' tab open.

//Button active toggler
$('.btn').on('click', function(e) {
  e.preventDefault();
  if ($(this).hasClass('active')) {
    //Do nothing
  } else {
    // Hide other dropdowns
    $('.active').removeClass('active');
    // Open this dropdown
    $(this).addClass('active');
  }
});

//Components toggle
$(function() {
  $('.targetDiv').hide();
  $('#div1').show();
  $('.switch').click(function() {
    if ($(window).width() < 576) {
      $('.targetDiv').hide();
      $('#div' + $(this).attr('target')).show();
      //In mobile, scroll to top of active div when shown
      $('html, body').animate({
        scrollTop: $('.active').offset().top - 16
      }, 1000);
    } else {
      $('.targetDiv').hide();
      $('#div' + $(this).attr('target')).show();
    }
  });
});

.buttons-desktop-only {
  display: none;
}

@media (min-width:48em) {
  .buttons-desktop-only {
    display: block;
  }
  .button-mobile-only {
    display: none;
  }
}

.targetDiv {
  width: 200px;
  height: 200px;
}

#div1 {
  background: green;
}

#div2 {
  background: yellow;
}

#div3 {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="buttons-desktop-only">
  <a class="btn switch active" target="1">Button 1</a>
  <a class="btn switch" target="2">Button 2</a>
  <a class="btn switch" target="3">Button 3</a>
</div>
<div class="wrapper">
  <div class="button-mobile-only">
    <a class="btn switch active" target="1">Button 1</a>
  </div>
  <div id="div1" class="targetDiv" target="1">Test 1</div>
  <div class="button-mobile-only">
    <a class="btn switch active" target="2">Button 2</a>
  </div>
  <div id="div2" class="targetDiv" target="2">Test 2</div>
  <div class="button-mobile-only">
    <a class="btn switch active" target="3">Button 3</a>
  </div>
  <div id="div3" class="targetDiv" target="3">Test 3</div>
</div>

Some pseudo code to describe what I want to do:

Page linking to tabs page

<a href="mypage#button2">Got to button2 on another page</a>

Tabs page

<a id="button1">button1</a>
<a id="button2">button2</a>
<a id="button3">button3</a>

Answer 1

Link to the page using href="mypage.html?tab=2"

Add the following JQuery to the target page to read the URL query

$.urlParam = function (name) {
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    return results[1] || 0;
}

$(function () {

    // examine the URL's querystring

    var tabToLoad = $.urlParam('tab');
    console.log(tabToLoad);

    // test if the querystring contains a "tab" key-value pair, and if so, do something with it

    if (tabToLoad != null) {

        TabToggler(tabToLoad);

    }

});


// this function hides all tabs, then displays the desired tab
function TabToggler(strTabID) {
    var allbtns = $('.btn');
    var alltabs = $('.targetDiv');
    alltabs.hide();
    allbtns.removeClass('active');

    var tab = $('[target="' + strTabID + '"]');

    if (!tab.hasClass('active')) {
        tab.addClass('active');
        tab.show();
    }
}

Answer 2

A solution:

1) Add a key to any link to the page, e.g. mypage.html?tab=2

2) Add some Javascript to the page that runs after the DOM is loaded that reads the key from location.query and runs your button toggler

3) Separating your button toggler function so it is not an anonymous function in your jQuery event listener, but can be executed by your new function that read the key

Let's start with #1. For any link to this page, you need to add a querystring key-value pair to the end of it that will denote which tab to activate upon the page being shown. For instance, if your link is https://mywebsite.com/tabs.html, and you want tab 2 to open, then the new link would be https://mywebsite.com/tabs.html?tab=2.

After you have updated every link in the fashion described above, it is time to add some Javascript to the page with the tabs, e.g. tabs.html The JS needs to run after the DOM has loaded, which we can handle via jQuery (I'm assuming you already knew this...)

$(function(){


  // examine the URL's querystring
  
  var qs = new URLSearchParams(location.href); // 
  
  // test if the querystring contains a "tab" key-value pair, and if so, do something with it
  
  if( qs.get("tab")!=null ){
  
    let tabToLoad = qs.get("tab"); // contains "2" if the URL of the page is mypage.html?tab=2
    
    // call your tab toggler, and pass it the tab variable
    
    TabToggler(tabToLoad);    
      
  }

});


// this function hides all tabs, then displays the desired tab
function TabToggler(strTabID){
    var alltabs = $('.targetDiv');
    alltabs.removeClass('active');

    var tabToLoad = $('[target="'+ strTabID +'"]');
    
    if(!tabToLoad.hasClass('active')){
        tabToLoad.addClass('active');
    }
}