Linking Directly to a Tab using Prototype

Question

I'm using Magento to build a storefront - I'm not used to Prototype, but that's what they use by default, so I'm trying to play nice. I have used the tabs setup provided in the Modern theme (built by the Magento team), and I've integrated it into my theme and it works great.

Where I need help is in directly linking to a specific tab - I've created a tab to house the product reviews, and that works fine, but there are links higher up on the page that link to reviews - however, they are linking to another page, which I would rather not use. I'm not familiar with the prototype being used, and I don't know what the link would look like to link to the tab - I'd like the experience to be something similar to:

1) Click on the link 2) The reviews tab opens and the page moves you down to it - like a run-of-the-mill anchor.

The href value of the tab is simply:

javascript:void(0);

The javascript that runs the operation is this:

    Varien.Tabs = Class.create();
    Varien.Tabs.prototype = {
      initialize: function(selector) {
        var self=this;
        $$(selector+' a').each(this.initTab.bind(this));
      },

      initTab: function(el) {
          el.href = 'javascript:void(0)';
          if ($(el.parentNode).hasClassName('active')) {
            this.showContent(el);
          }
          el.observe('click', this.showContent.bind(this, el));
      },

      showContent: function(a) {
        var li = $(a.parentNode), ul = $(li.parentNode);
        ul.select('li', 'ol').each(function(el){
          var contents = $(el.id+'_contents');
          if (el==li) {
            el.addClassName('active');
            contents.show();
          } else {
            el.removeClassName('active');
            contents.hide();
          }
        });
      }
    }
    new Varien.Tabs('.product-tabs');

My guess is that I need to invoke the showContent function and just force it to use the reviews tab, but I'm not quite sure how to do this. If anyone could shed some light on it, I'd appreciate it.

Thanks.

Answer 1

Not entirely the right answer, ie it cheats a bit, but we solved this by using jQuery's 'click()' function to simulate the tab click.

ie Gave the reviews tab title anchor an id of 'tab-reviews-tab' and in our link at the top of the page added the following JS:

jQuery('#tab-reviews-tab').click();

Obviously it would be silly to include jQuery just for this, but if you're using it for something else already, sticking to what you know can work!