How to redirect the user when clicking on the buttons from one tab to another, which contains the anchor?

Question

JavaScript

I've already looked at a lot of materials, similar questions, but I can not find a solution.
On the page in the header there is a button "Buy" with a link to the anchor #purchase, the block with the anchor is located on the tab #about. The click works fine only on the activated #about tab (activated by default, when entering the page), if you switch to another tab, nothing happens when you click on the "Buy" button. Returns to #about - works with an anchor.
Accordingly, you need to understand what script to write in order for the button to work on all tabs, namely, open the #about tab, where the anchor is located and switch to the #purchase anchor.
Now this js works:
General for tabs

jQuery(function(){
    var hash = window.location.hash;
    hash && jQuery('a.c-tab[href="' + hash + '"]').tab('show');
    if(hash)previousActive = jQuery('a.c-tab[href="' + hash + '"]');
    else previousActive=jQuery('#c-tabs>li:first-child>a');

    previousActive.addClass('color');
  

    jQuery('.c-tab').click(function (e) {e.preventDefault();
      jQuery(this).tab('show');
      previousActive.removeClass('color');
      previousActive=jQuery(this);
      jQuery(this).addClass('color');
      var scrollmem = jQuery('body').scrollTop() || jQuery('html').scrollTop();
      window.location.hash = this.hash;
      jQuery('html,body').scrollTop(scrollmem);
      jQuery(document).trigger('resize');
      
    });

    jQuery('.business-tab').each(function(){
      if(jQuery(this).parent().hasClass('active')) {
        //jQuery(this).trigger('click');
        jQuery(this).tab('show');
        previousActive.removeClass('color');
        previousActive=jQuery(this);
        jQuery(this).addClass('color');
        jQuery(document).trigger('resize');
      }
    })

Smooth scrolling

$(document).ready(function(){
    $('.purchase-button').click( function(){
  var scroll_el = $(this).attr('href');
        if ($(scroll_el).length != 0) { 
      $('html, body').animate({ scrollTop: $(scroll_el).offset().top }, 500); 
        }
      return false;
    });
});

And what doesn't work:

}),jQuery(".purchase-click").each(function() {
        	if ( post.isPost )
          	jQuery(this).find('.purchase-button').click(function(){
          		jQuery('#about-tab').trigger('click'); // Кнопка таба about, при клике активирует содержимое #about
          	});

The idea is that when you are on any tab, when you click on the Buy button, the about tab is activated and scrolling to the block with the #purchase anchor.

Answer 1

This is the code of the Wordpress theme developer, I just added the purchase button and added scrolling for it.
Here's what the original template looks like: https://businessfinder.wyzi-directory-theme.com/bu...
I've added a buy button where the blue social buttons are now. In fact, I'm trying to repeat what the SHOW MORE button on the left does now - it takes you to the #about tab from anywhere and makes a smooth scroll to id=about.