Posted By

flintcreative on 01/20/12

Tagged

js
magento

Versions (?)

Last Edited at 01/20/12 04:54am

Statistics

Viewed 868 times

Favorited by 0 user(s)

Related snippets

Remotely Trigger Varien Tabs Class

/ Published in: JavaScript

extends the default varien "tabs" class to allow other links on the page to open a tab

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

// Located in tab.phtml
// Around Line 45 you are going to want to replace the <script> block with this
<script type="text/javascript">
//<![CDATA[
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.getElementsBySelector('li').each(function(el){
      var contents = $(el.id+'_contents');
      if (el==li) {
        el.addClassName('active');
        contents.show();
      } else {
        el.removeClassName('active');
        contents.hide();
      }
    });
  },
 
  remoteTabs: function(b) {
    var controlledLink = $$("#"+b+" a")[0];
    this.showContent(controlledLink);
  }
 
}
var csTablist = new Varien.Tabs('.tabs');
//]]>
</script>  
 
// to allow the link to fire remotely you can add the following to the link <a>
onclick="javascript:csTablist.remoteTabs('product_tabs_email');
//Where product_tabs_email is the name of the li that you want to open. 
// stolen from this post: http://www.magentocommerce.com/boards/viewreply/262411/