Linking Directly to a Tab using Prototype

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.

---

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!

---

If someone is still interested in a solution, here is a hint to the same question:

souce link http://www.magentocommerce.com/boards/viewthread/59930/#t262411

Hope this can help u.

---

The answer to your question is on gist and ipaste.

Here's this summary:

You need to save the Varien.Tabs object in a var so replace the new Varien.Tabs('.product-tabs'); with var csTabs = new Varien.Tabs('.product-tabs');

If you are only doing this one time just create link as such:

<a href="#" onclick="javascript:csTabs.showContent($$('#product_tabs_email_or_other_id a')[0]);" >The Link</a>

If you expect to do this often just add a new method to the Varien.Tabs (at line 75)

openTab:  function(b) {
  var controlledLink = $$("#"+b+" a")[0];
  this.showContent(controlledLink);
}

Now your links work like this:

<a href="#" onclick="javascript:csTabs.openTab('product_tabs_email');">Email</a>
<a href="#" onclick="javascript:csTabs.openTab('product_tabs_info');">Further Info</a>