Add Direct Link to Quick Tab Using Javascript

As is stated in #308633: direct url to a tab, it is straight forward to create a direct link to a quicktab without javascript.

What the following steps allow you to do is add a direct link to any quicktab from anywhere within your webpage without changing the url , which is the normal behavior if you click on any tab. FYI: Ajax loading is not affected.

1) Say you want to add a link from within the first tab to the second tab. In my case, the quicktabs number was 1. I added a link with the following code:

print (l(
  t('Click here for second tab')
  ,$_GET['q']
  ,array(
    'query' => array(
      'quicktabs_1' => '1'
    )
    ,'fragment' => 'quicktabs-1'
    ,'attributes' => array(
      'class' => 'dlink'  // this is to identify all the links that are to be treated as direct links to quicktabs
      ,'id'    => 'dlink-quicktabs-tab-1-1'  // this is a concatenation of keyword 'dlink' and the ID of the second tab
    )
  )
));

Which produces the following link:

  <a href="CURRENT_URL?quicktabs_1=1#quicktabs-1" class="dlink" id="dlink-quicktabs-tab-1-1">Click here for second tab</a>

If javascript is not enabled, link will go to second tab, but change the url.

2) Next, create a javascript file, which I name 'quicktabs_dlink.js', and add the following:

Drupal.behaviors.dlinkQuicktabs = function (context) {
  $('a.dlink:not(.dlink-processed)', context).addClass('dlink-processed).each(function(){
    $(this).unbind('click').bind('click',dlinkQuicktabsClick);
  });
};
var dlinkQuicktabsClick = function() {
  var tid = this.id.substring(this.id.indexOf('-')+1);
  $('#'+tid).trigger('click');
  return false;
}

3) quicktabs_dlink.js needs to be loaded when quicktabs is rendered, so add the following to your theme's template.php file.

function phptemplate_quicktabs_tabs($quicktabs, $active_tab) {
  drupal_add_js(drupal_get_path('theme','YOUR_THEME').'/js/quicktabs_dlink.js');
  return theme_quicktabs_tabs($quicktabs, $active_tab);
}

Clear your cache, and enjoy a direct link to any quicktab from anywhere on your page without changing the url.